React で表示または非表示にする方法

React の表示および非表示メソッド: 1. vue の [v-if] と同様に、状態変数を使用して要素をレンダリングするかどうかを制御します; 2. [v-show] と同様に、スタイルを通じて表示属性を制御しますvue ;3. className を動的に切り替えることによって。

このチュートリアルの動作環境: Windows10 システム、react16、この記事はすべてのブランドのコンピューターに適用されます。

反応表示非表示メソッド:

メソッド 1:

最初のメソッドは、この例では ## を使用します #showElem 要素をロードするかどうかを制御する変数。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:'none'
        }
    }
    render(){
        return (
            <div style={{display:this.state.showElem}}>显示的元素</div>
        )
    }
}

方法 3:

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 は再レンダリングされるため、表示と非表示を頻繁に制御するのには適していません。要素。これにより、より多くのパフォーマンスが消費されます。この場合、表示による制御の方が第２または第３の方法が合理的である。

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

#関連する無料学習の推奨事項:

JavaScript(ビデオ)

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