React-JSX でクラスとスタイルの動的バインディングを実装する方法 (例付き)

この記事の内容は、React-JSX でのクラスとスタイルの動的バインディングの実装方法に関するものです (例付き)。必要な方は参考にしていただければ幸いです。

要約: クラス リストと要素のインライン スタイルの操作は、データ バインディングの一般的な要件です。dom 要素を頻繁に操作すると、JavaScript のパフォーマンスが低下します。高パフォーマンスの JS を実現するには、クラスとスタイルの動的バインディングが必須です。優秀なプログラマーが厳選。この記事は React-JSX 構文に基づいており、他のフレームワークの実装メソッドと組み合わせて、ClassName と Style の動的バインディングを実装する方法を紹介します。

注: この記事の例は検証済みです。誤りがある場合は、批判して修正してください。

HTML クラスのバインド

オブジェクト構文

オブジェクトを className に渡して、クラスを動的に切り替えることができます。注: vue や小規模プログラムなどのオブジェクト構文の使用はサポートされていません

エラー例:

render(){
  return <p className={ &#39;box-color&#39;：this.state.isError }>hello world</p>
}

実装できる構文は次のとおりです:

1. 論理演算子を使用します

css ファイル

.box-color {
  color：red;
}

js ファイル

render(){
  return <p className={ this.state.isError && &#39;box-color&#39; }>hello world</p>
}

2. 3 つのメタ演算子を使用します

CSS ファイル

.box-show {
  display: block;
}

.box-hide {
  display: none;
}

render(){
  return <p className={ this.state.isShow ? &#39;box-show&#39; : &#39;box-hide&#39; }>hello world</p>
}

3. 関数を使用してバインドされたデータ オブジェクト

は、テンプレート内でインラインで定義する必要はありません。vue の計算されたフック関数と同様に、関数を定義できます

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 を動的にバインドします。

配列構文

React-JSX 構文は className 配列構文をサポートしていません:

css ファイル

.box-hide {
  display: none;
}

.box-color {
  color：red;
}

js ファイル

this.state = {isShow: false}

render(){
  return <p className={ this.state.isShow ? &#39;box-color&#39; : [ &#39;box-color&#39;, &#39;box-hide&#39;] }>hello world</p>
}

コンソール表示結果 (無効、真ん中に余分なカンマがあります):

<p class="box-color, box-hide">hello world</p>

注: 配列構文はサポートされていないため、「box-color」のスタイルを「box-hide」に再利用し、三項演算子を使用して表現することしかできません。これにより、CSS コードの量が増加します。

バインドインラインスタイル

オブジェクト構文

スタイルオブジェクト構文は、clasNameオブジェクトよりも直感的であり、処理関数は、classNameの実装を参照できます。三項演算子のみが導入されています。以下使用法:

三項演算子

Vueのvue-ifやWeChatアプレットのwx-if命令と同様に、スタイル三項演算子を使用して動的に実装できます

jsファイル

render(){
  return <p style={ this.state.isShow ? {display: &#39;inline-block&#39;} : { display: &#39;none&#39;} }>hello world</p>
}

配列構文

React-JSX 構文もスタイル配列構文はサポートされていません。例を試してください:

js ファイル

render(){
  return <p style={ this.state.isShow ? {color: &#39;red&#39;} : [{color: &#39;red&#39;}, {display: &#39;inline-block&#39;}] }></p>
}

コンソール表示結果 (無効):

<p></p>

つまり、プロジェクト要件を高品質で完了し、ますます複雑化するビジネス シナリオに対処するには、多数の DOM 要素を操作し、スタイル変数にランダムな名前を付けて、それをクラスとスタイルにバインドすることはお勧めできません。

おすすめ関連記事:

以上がReact-JSX でクラスとスタイルの動的バインディングを実装する方法 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。