What should I do if the modal in react does not take effect?

Solution to the problem that modal does not take effect in react: 1. Remove "" in the "main.jsx" file; 2. Where the modal component is used, add two attributes "transitionName" to Modal ="" maskTransitionName="""; 3. Upgrade "ant-design".

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What should I do if the modal in react does not take effect?

The modal pop-up window error when using the ant component library in react

Solution to using ant-design in the react project The modal pop-up console in the library reports an error

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DomWrapper3 which is inside StrictMode.

Root cause of the problem:

Strict mode is turned on in the react scaffolding, which restricts code writing standards. CSSTransition is used in the ant-design component library, but the way of writing some codes in CSSTransition is not the latest way of writing for react, and it is not a very standard way of writing, so react in strict mode will throw Issue a warning. As a result, the pop-up window cannot be used

Solution:

1. Turn off the strict mode of react

Change the main.jsx file Remove. However, in development projects, the React.StrictMode tag is still very important for code verification, so it is best not to turn it off. This method is not recommended. And in the new version of react, removing the strict mode will cause some other problems.

2. Do not use the CSSTransition effect in ant-design

Where the modal component is used, add two attributes to Modal

transitionName="" maskTransitionName=""

<Modal title="Basic Modal" 
transitionName=""
maskTransitionName="" 
visible={isModalVisible} 
onOk={this.handleOk} 
onCancel={this.handleCancel}>
    <p>确定删除该代办任务吗？</p>
</Modal>

3. You can wait for the ant-design upgrade to solve this problem

Recommended study: " react video tutorial》

The above is the detailed content of What should I do if the modal in react does not take effect?. For more information, please follow other related articles on the PHP Chinese website!