React 16隐藏按钮Modal不会在单击时打开

是因为在React 16中，Modal组件的显示和隐藏是通过state来控制的。当按钮被点击时，需要更新state来显示Modal。

首先，需要在React组件的state中添加一个变量来控制Modal的显示与隐藏。可以使用useState钩子函数来实现：

import React, { useState } from 'react';

function App() {
  const [showModal, setShowModal] = useState(false);

  const handleClick = () => {
    setShowModal(true);
  };

  return (
    <div>
      <button onClick={handleClick}>显示Modal</button>
      {showModal && <Modal />}
    </div>
  );
}

function Modal() {
  const handleClose = () => {
    setShowModal(false);
  };

  return (
    <div className="modal">
      <h1>Modal内容</h1>
      <button onClick={handleClose}>关闭Modal</button>
    </div>
  );
}

export default App;

在上述代码中，我们使用useState钩子函数来创建一个名为showModal的状态变量，并将初始值设置为false。当按钮被点击时，handleClick函数会将showModal的值更新为true，从而显示Modal组件。

在App组件的返回值中，我们使用条件渲染来判断showModal的值，如果为true，则渲染Modal组件。

Modal组件中的关闭按钮也需要更新showModal的值为false，从而隐藏Modal。

这样，当按钮被点击时，Modal就会显示出来。