ホームページ > ウェブフロントエンド > jsチュートリアル > Reactで表示と非表示を制御する方法

Reactで表示と非表示を制御する方法

coldplay.xixi
リリース: 2021-01-08 17:23:09
オリジナル
7809 人が閲覧しました

react で表示と非表示を制御するメソッド: 1. 状態変数を通じて要素をレンダリングするかどうかを制御します; 2. スタイルを通じて表示属性を制御します; 3. className を動的に切り替えます。

Reactで表示と非表示を制御する方法

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

react で表示と非表示を制御するメソッド:

1. 状態変数を使用して要素をレンダリングするかどうかを制御します

vue の場合と同様です

v -if

メソッドは変数を使用して要素をロードするかどうかを制御します。変数が false の場合、コンテンツは直接レンダリングされません。

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

2. style を通じて表示属性を制御します

vue の

v-show と同様です

表示を通じて要素の表示と非表示を制御しますattribute

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

3. className を動的に切り替えることで、

#className を通じてクラス名を切り替えて、要素の表示と非表示を切り替えます。

//.css文件
.is-show{
    display:none
}
//.js文件
class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isShow:true
        }
    }
    render(){
        return (
            <div>
              // 写法一 
              <div className={this.state.isShow?&#39;old&#39;:&#39;old is-show&#39;}>显示的元素</div>
              // 写法二
              <div className={`${this.state.isShow?&#39;&#39;:&#39;is-show&#39;} old`}>显示的元素</div>
            </div>
        )
    }
}
ログイン後にコピー

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

(ビデオ)

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

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