How to dynamically add nodes in react

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.

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!