ReactでDOM要素を削除する方法-フロントエンドQ&A-php.cn

ReactでDOM要素を削除する方法

藏色散人

リリース： 2022-12-27 09:39:31

オリジナル

2908 人が閲覧しました

dom 要素を削除するための React メソッド: 1. レンダリングライフサイクルを使用して DOM ノード変数を定義します; 2. 「onClickS(){this.setState({deled:false})}」を通じて dom 要素を削除しますそれでおしまい。

ReactでDOM要素を削除する方法

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react で dom 要素を削除するにはどうすればよいですか?

react 要素 DOM ノードを削除 (非表示) および追加 (表示) します

通常は、削除 (非表示) および追加 (表示) します。多くの人は、これを実現するために、CSS 表示の none スタイルを使用します。欠点があります。F12 はスタイルを直接変更できるだけです。非常に安全ではありません。実際の削除と追加を実装する必要がありますが、React のビューでは、このコンポーネントをレンダリングするかレンダリングしないとも言えます。この dom

react には、removeChild メソッドはありますが、appendChild. メソッドがないため、state メソッドと組み合わせたレンダリングを通じてのみページを更新できます

つまり、レンダリングライフサイクルを使用して変数 DOM ノード変数を定義します

その後、状態を使用して表示するかどうかの値を更新します

import React from &#39;react&#39;;
class Page2 extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            deled:true
        }
        this.onClick=this.onClick.bind(this)
        this.onClickS=this.onClickS.bind(this)
      }
 //恢复
    onClick(){
        this.setState({
            deled:true
        })
    }
  //删除
    onClickS(){
        this.setState({
            deled:false
        })
    }
    render() {
        const { deled} = this.state;
        var  showMap=&#39;&#39;;
        //三元表达式判断deled的值来更新showMap
        deled==true?showMap=<img src={require(&#39;../image/joinwechat/s.png&#39;)}></img>:showMap=&#39;&#39;//这是一张二维码图
        return (
            < >
                 <button onClick={this.onClickS}>点我删除二维码</button>
                 <button onClick={this.onClick}>点我恢复二维码</button>
                    {showMap}
            </>
        )
    }
}
export default Page2;

ログイン後にコピー

推奨される学習: 「react ビデオチュートリアル」

以上がReactでDOM要素を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。