ReactJS コンポーネントに複数のクラスを追加するにはどうすればよいですか?

ReactJS コンポーネントへの複数のクラスの追加

ReactJS および JSX を使用する場合、複数のクラスをコンポーネントに適用する必要がある状況に遭遇することがあります。単一コンポーネント。一般的なシナリオの 1 つは、要素にフォーカスがあるかクリックされたときにアクティブ クラスを条件付きで追加することです。

この例では、次のように li 要素の className 属性に複数のクラスを追加しようとしています。

<li key={index} className={activeClass, data.class, "main-class"}></li>

ただし、このアプローチではカンマ演算子 , を使用し、空白を追加せずに文字列を連結するだけです。複数のクラスを正しく追加するには、ES6 テンプレート リテラル機能を使用する必要があります。

AccountMainMenu コンポーネントで、レンダリング メソッドを次のように変更します。

render: function() {
    // ... existing code

    return (
      <div className="acc-header-wrapper clearfix">
        <ul className="acc-btns-container">
          {accountMenuData.map((data, index) => {
            let activeClass = "";

            if (this.state.focused == index) {
              activeClass = "active";
            }

            return (
              <li
                key={index}
                className={`${activeClass} ${data.class} main-class`}
                onClick={this.clicked.bind(self, index)}
              >
                <a href="#" className={data.icon}>
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

ここで、className 属性はテンプレートを使用します。複数のクラスを空白で連結するリテラル。 activeClass 変数と data.class 変数を補間することで、目的のクラスを条件付きで適用できます。

このアプローチにより、コンポーネントの状態やプロパティに基づいてクラスを動的に追加および削除できるため、ReactJS の柔軟性と制御が向上します。コンポーネント。

以上がReactJS コンポーネントに複数のクラスを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。