ホームページ > 記事 > ウェブフロントエンド > React で動的にノードを追加する方法
React でノードを動的に追加する方法: 1. "KmcDialog.showInstance = function(properties) {...}" メソッドを使用してポップアップ ボックスを表示します。 2. "KmcDialog.showInstance({ isShow: true}) ;KmcDialog.removeInstance();」メソッドは、必要に応じて直接呼び出すことができます。
このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。
react でノードを動的に追加するにはどうすればよいですか?
React-Dynamic Insertion of Node Components
コンポーネントを導入した後、それを呼び出して表示コンポーネントを挿入できます
/**********组件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ローカル直接呼び出しを使用する必要があります:
KmcDialog.showInstance({ isShow: true }); KmcDialog.removeInstance();
推奨される学習: 「react ビデオ チュートリアル 」
以上がReact で動的にノードを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。