是因为在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就会显示出来。
领取专属 10元无门槛券
手把手带您无忧上云