div を表示および非表示にするための React メソッド: 1. 機能コンポーネントのコンテンツで "{showoverlay? (
):null}" を使用して div を表示および非表示にします; 2. 決定ビジネスロジックでvisibleの値を設定し、コンポーネントスタイルで「style={{ display: `${visible ? '' : 'none'}` }}」を設定します。
このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。
反応で div を表示および非表示にするにはどうすればよいですか?
#react 関数コンポーネントの下のコンポーネントを非表示および表示する方法 (2 つの方法)最初の方法
1. 関数 数式コンポーネントコードは次のとおりです (例)://函数式组件内容中 const [showoverlay, setshowoverlay] = useState(false); //渲染时,运算符 return( <> {showoverlay? (<div>显示或隐藏</div>):null} </> )
//构造函数中 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 ? '' : 'none'}` }}> 组件内容 </div>
react ビデオ チュートリアル 」 「
以上がReact で div を表示および非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。