React中的
Modal组件可以用于
实现弹窗、提示框等功能。下面是一个简单的
Modal组件的封装示例：
```jsx
import
React from '
react';
import
ReactDOM from '
react-dom';
const
modalRoot = document.getElementById('
modal-root');
class
Modal extends
React.Component {
constructor(props) {
super(props);
this.el = document.createElement('div');
}
componentDid
Mount() {
modalRoot.appendChild(this.el);
}
componentWillUn
mount() {
modalRoot.re
moveChild(this.el);
}
render() {
const { children, onClose } = this.props;
return
ReactDOM.createPortal(
<div className="
modal">
<div className="
modal-content">
{children}
<button onClick={onClose}>Close</button>
</div>
</div>,
this.el
);
}
}
export default
Modal;
```
在上述代码
中，我们定义了一个名为
Modal的组件，并使用
ReactDOM.createPortal方法将其渲染到
modalRoot
中，
实现了
Modal的弹出效果。
Modal组件接收两个props，分别是children和onClose。其
中，children用于传递
Modal中的内容，onClose用于处理
Modal的关闭事件。
使用
Modal组件时，我们可以在父组件
中定义一个
state，用于控制
Modal的显示和隐藏：
```jsx
import
React from '
react';
import
Modal from './
Modal';
class App extends
React.Component {
state = {
show
Modal: false
}
handleOpen
Modal = () => {
this.
setState({ show
Modal: true });
}
handleClose
Modal = () => {
this.
setState({ show
Modal: false });
}
render() {
const { show
Modal } = this.
state;
return (
<div>
<button onClick={this.handleOpen
Modal}>Open
Modal</button>
{show
Modal &&
<
Modal onClose={this.handleClose
Modal}>
<h2>
Modal Title</h2>
<p>
Modal Content</p>
</
Modal>
}
</div>
);
}
}
export default App;
```
在上述代码
中，我们在父组件
中定义了一个show
Modal状态，用于控制
Modal的显示和隐藏。当用户点击“Open
Modal”按钮时，我们将show
Modal设置为true，从而显示
Modal组件。当用户点击
Modal中的“Close”按钮时，我们调用handleClose
Modal方法，将show
Modal设置为false，从而隐藏
Modal组件。
通过封装
Modal组件，我们可以在
React应用
中方便地
实现弹窗、提示框等功能，并且可以灵活地控制
Modal的显示和隐藏。
3971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
