ホームページ > ウェブフロントエンド > フロントエンドQ&A > Reactで条件に基づいて要素を非表示にする方法

Reactで条件に基づいて要素を非表示にする方法

青灯夜游
リリース: 2022-12-27 19:08:44
オリジナル
2655 人が閲覧しました

実装方法: 1. 状態変数を使用して要素をレンダリングするかどうかを制御します。値が false の場合、コンテンツは直接レンダリングされません。2. スタイルを通じて表示属性を制御し、要素を非表示にします。属性値が none の場合 3. className を介して非表示を動的に切り替えて、要素の表示と非表示を切り替えます。

Reactで条件に基づいて要素を非表示にする方法

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

React要素の表示と非表示を制御するには 3 つの方法があります:

  • 1 つ目は、state を使用する方法です。変数 vuev-if と同様に、要素をレンダリングするかどうかを制御します。

  • 2 つ目は、vue## の v-show と同様に、style を通じて display 属性を制御することです。 #。

  • 3 番目の方法は、

    className を動的に切り替えることです。

方法 1:

最初の方法は、この例では showElem 変数を使用して、要素をロードするかどうかを制御することです。 false、コンテンツは直接レンダリングされません。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            <div>
                {
                    this.state.showElem?(
                        <div>显示的元素</div>
                    ):null
                }
            </div>
        )
    }
}
ログイン後にコピー

方法 2:

この方法は非常に簡単です。display を通じて要素の表示と非表示を制御します。属性。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:&#39;none&#39;
        }
    }
    render(){
        return (
            <div style={{display:this.state.showElem}}>显示的元素</div>
        )
    }
}
ログイン後にコピー

方法 3:

hide から className を切り替えて、表示と表示を実現します。の要素が非表示になります。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            <div>
                {/* 写法一 */}
                <div className={this.state.showElem?&#39;word-style&#39;:&#39;word-style hide&#39;}>显示的元素</div>
                {/* 写法二 */}
                <div className={`${this.state.showElem?&#39;&#39;:&#39;hide&#39;} word-style`}>显示的元素</div>
            </div>
        )
    }
}
ログイン後にコピー

方法 1 は、要素を再レンダリングするため、パフォーマンスに負荷がかかるため、表示と非表示を頻繁に制御するのには適していません。この場合、表示による制御の方が第2または第3の方法が合理的である。

方法 1 は、ユーザー情報ページなど、セキュリティの高いページに適しています。ユーザー レベルに応じて、異なるコンテンツが表示されます。現時点では、方法 1 または 2 を使用しても、次の場合にユーザーは表示できます。ページは表示されたままで、非表示になっているだけなので、ネットワークが開きます。 1 つ目の方法は、ユーザー情報の DOM 要素を直接描画せず、セキュリティを確保する方法です。

【関連する推奨事項:

Redis ビデオ チュートリアル プログラミング教育

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート