Home  >  Article  >  Web Front-end  >  How to dynamically add nodes in react

How to dynamically add nodes in react

藏色散人
藏色散人Original
2022-12-29 11:48:011955browse

How to dynamically add nodes in react: 1. Display the pop-up box through the "KmcDialog.showInstance = function(properties) {...}" method; 2. Use "KmcDialog.showInstance({isShow: true}) ;KmcDialog.removeInstance();" method can be called directly where needed.

How to dynamically add nodes in react

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

How to dynamically add nodes in react?

React-Dynamic Insertion of Node Components

After introducing the component, you can insert the display component by calling it

/**********组件KmcDialog************/
/**
 * 显示弹框
 */
KmcDialog.showInstance = function(properties) {
    if (!document.getElementById("KmcDialog")) {
        let props = properties || {};
        let div = document.createElement('div');
        div.setAttribute('id', 'KmcDialog');
        document.body.appendChild(div);
        ReactDOM.render(React.createElement(KmcDialog, props), div);
    }
}
/**
 * 删除弹框
 */
KmcDialog.removeInstance = function() {
    if(document.getElementById("KmcDialog")) {
        document.getElementById('KmcDialog').remove();
    }
}

When you need to use Local direct call:

KmcDialog.showInstance({
    isShow: true
});
KmcDialog.removeInstance();

Recommended learning: "react video tutorial"

The above is the detailed content of How to dynamically add nodes in react. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn