Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of how to use modal in react. The content is detailed and easy to understand. The operation is simple and fast. It has certain reference value. I believe everyone will gain something after reading this article on how to use modal in react. Let's take a look at it together.

In react, modal is used to override native views that contain the root view, which can be implemented as a mask, with the syntax "" or "Modal.confirm()."

This tutorial will operate on Windows 10, React17.0.1, Dell G3 PC.

What is the use of modal in react?

Modal Brief

modal dialog box. When the user needs to handle the transaction, but does not want to jump to the page and interrupt the workflow, you can use Modal to open a floating layer in the middle of the current page to carry the corresponding operation.

In addition, when you need a concise confirmation box to ask the user, you can use syntax sugar methods such as Modal.confirm().

Core Function Point Extraction

According to the interface provided by Antd Modal document, Modal.

core implementation

The Modal component is special in that it has two uses:

Common usage:

Call static method: Modal.confirm({ title: 'After canceling, edited script information will not be saved. Please confirm whether to cancel. ', okText:'confirm cancellation', cancelText:'hold cancellation', onOk() { me.props.onCancel(); } })

My idea is that both calls are maintained uniformly in internalModal.tsx

顺着这个思路， 对于 Modal.tsx 。

1）不会维护 render 方法， 而是在 componentDidMount / componentDidUpdate 生命周期中调用 internalModal.tsx 完成渲染

2）Modal.tsx 中维护相关静态方法 confirm, error, info 等。

// Modal.tsxexport default class Modal extends React.Component { static propTypes = { ... }; static confirm(content) { const modal = new InternalModal(); const props = { ...Modal.defaultProps, title: '提示', children: content, cancelButton: true, okButton: true, okButtonText: '确定', cancelButtonText: '取消', closable: false, visible: true, onOk() { modal.destroy(); }, onCancel() { modal.destroy(); } }; modal.render(props); } private modal; constructor(props: ModalProps) { super(props); this.modal = new InternalModal(); } componentWillUnmount() { this.modal.destory(); this.modal = null; } componentDidMount() { this.modal.render(this.props); } componentDidUpdate() { this.modal.render(this.props); } componentWillReceiveProps(nextProps) { if (nextProps.visible) { this.modal.show(); } else { this.modal.hide(); } } render() { return null; }}

接下来就是最关键的 internalModal.tsx :

export default class InternalModal { private props; render(props) { const {...} = this.props; this.createContainer(); const icon = require('../../assets/icon/info.svg') as string; const modalDOM = ...; ReactDOM.render({modalDOM}, modalContainer, () => { if (visible) { this.show(); } }); } ... createContainer() { if (!modalContainer) { modalContainer = document.createElement('p'); document.body.appendChild(modalContainer); } } destroy() { if (modalContainer) { ReactDOM.unmountComponentAtNode(modalContainer); } } show() { if (modalContainer) { modalContainer.style.display = 'block'; } } hide() { if (modalContainer) { modalContainer.style.display = 'none'; } }}

从代码可以发现 internalModal 的实现要点：

作为一个普通 js 类 (并没有继承 React.Component) ，提供一个 render 方法，render 中通过ReactDOM.render(element, container[, callback])渲染弹出窗口

在 document 上创建一个 p container 乘放 Modal，通过 css display 控制显示/隐藏，其实也可以使用 React Portal.

可以用一些第三方库比如react-transition-group 来增强 Modal 显示/隐藏的动画效果。

关于"react中的modal怎么用"这篇文章的内容就介绍到这里，感谢各位的阅读!相信大家对"react中的modal怎么用"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.