React で div を表示および非表示にする方法

藏色散人
リリース: 2023-01-18 13:58:15
オリジナル
2707 人が閲覧しました

div を表示および非表示にするための React メソッド: 1. 機能コンポーネントのコンテンツで "{showoverlay? (

):null}" を使用して div を表示および非表示にします; 2. 決定ビジネスロジックでvisibleの値を設定し、コンポーネントスタイルで「style={{ display: `${visible ? '' : 'none'}` }}」を設定します。

React で div を表示および非表示にする方法

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

反応で div を表示および非表示にするにはどうすればよいですか?

#react 関数コンポーネントの下のコンポーネントを非表示および表示する方法 (2 つの方法)

最初の方法

1. 関数 数式コンポーネント

コードは次のとおりです (例):

//函数式组件内容中
 const [showoverlay, setshowoverlay] = useState(false);
//渲染时,运算符
return(
     <>
     {showoverlay? (<div>显示或隐藏</div>):null}
     </>
)
ログイン後にコピー

2. クラス コンポーネント

オンラインの例は、基本的にクラス コンポーネントでの操作です。

コードは次のとおりです (例):

//构造函数中
constructor(props) {
    super(props);
    this.state = {showWarning: true}
  }
 //渲染时
      <>
  { this.state.showWarning?
        <div>显示或隐藏</div> :null
        }
      </>
ログイン後にコピー

2 番目の方法

//在业务逻辑中判断visible的取值
const [visible, setVisible] = useState<boolean>(false);
//组件样式中设置
<div className="overlaydiv" ref={overlayContainerRef} style={{ display: `${visible ? &#39;&#39; : &#39;none&#39;}` }}>
   组件内容
</div>
ログイン後にコピー

推奨学習:「

react ビデオ チュートリアル 」 「

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

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