この記事の内容は、React-JSX でのクラスとスタイルの動的バインディングの実装方法に関するものです (例付き)。必要な方は参考にしていただければ幸いです。
要約: クラス リストと要素のインライン スタイルの操作は、データ バインディングの一般的な要件です。dom 要素を頻繁に操作すると、JavaScript のパフォーマンスが低下します。高パフォーマンスの JS を実現するには、クラスとスタイルの動的バインディングが必須です。優秀なプログラマーが厳選。この記事は React-JSX 構文に基づいており、他のフレームワークの実装メソッドと組み合わせて、ClassName と Style の動的バインディングを実装する方法を紹介します。
注: この記事の例は検証済みです。誤りがある場合は、批判して修正してください。
オブジェクトを className に渡して、クラスを動的に切り替えることができます。注: vue や小規模プログラムなどのオブジェクト構文の使用はサポートされていません
エラー例:
render(){ return <p className={ 'box-color':this.state.isError }>hello world</p> }
実装できる構文は次のとおりです:
1. 論理演算子を使用します
.box-color { color:red; }
js ファイル
render(){ return <p className={ this.state.isError && 'box-color' }>hello world</p> }
2. 3 つのメタ演算子を使用します
.box-show { display: block; } .box-hide { display: none; }
render(){ return <p className={ this.state.isShow ? 'box-show' : 'box-hide' }>hello world</p> }
3. 関数を使用してバインドされたデータ オブジェクト
js ファイル
getIsError() { return this.state.isError ? 'box-color' : ''; } render(){ return <p className={ this.getIsError() }>hello world</p> }
注: 次のオブジェクト変数の記述方法はサポートされていないため、エラーは報告されません。コンソールの className は [object object] として表示されますが、これは無効です。
const classObj = { 'box-show': this.state.isShow, 'box-color': this.state.isError } render(){ return <p className={ classObj }>hello world</p> }
一般的に、関数バインディング方式は、プロジェクトのロジックが比較的複雑なシナリオで使用されます。あまりにも多く使用すると、ビュー層とロジック層が混乱し、読みやすく保守しにくくなります。演算子と三項演算子メソッドを使用して、Define Class を動的にバインドします。
配列構文
css ファイル
.box-hide { display: none; } .box-color { color:red; }
js ファイル
this.state = {isShow: false} render(){ return <p className={ this.state.isShow ? 'box-color' : [ 'box-color', 'box-hide'] }>hello world</p> }
コンソール表示結果 (無効、真ん中に余分なカンマがあります):
<p class="box-color, box-hide">hello world</p>
注: 配列構文はサポートされていないため、「box-color」のスタイルを「box-hide」に再利用し、三項演算子を使用して表現することしかできません。これにより、CSS コードの量が増加します。
バインドインラインスタイル
三項演算子
jsファイル
render(){ return <p style={ this.state.isShow ? {display: 'inline-block'} : { display: 'none'} }>hello world</p> }
配列構文
js ファイル
render(){ return <p style={ this.state.isShow ? {color: 'red'} : [{color: 'red'}, {display: 'inline-block'}] }></p> }
コンソール表示結果 (無効):
<p></p>
つまり、プロジェクト要件を高品質で完了し、ますます複雑化するビジネス シナリオに対処するには、多数の DOM 要素を操作し、スタイル変数にランダムな名前を付けて、それをクラスとスタイルにバインドすることはお勧めできません。
おすすめ関連記事:
HTMLで簡単な登録ページを実装する(コード付き) リンクタグリンクCSSと@import読み込みの違いは何ですか?以上がReact-JSX でクラスとスタイルの動的バインディングを実装する方法 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。