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

ReactJS コンポーネントに複数のクラスを動的に追加する

ReactJS を使用する場合、要素の className に複数のクラスを追加する必要が生じる場合があります。属性。潜在的なエラーや混乱を避けるために、ES6 テンプレート リテラルは洗練されたソリューションを提供します。

これを実現するには、テンプレート リテラルを使用してクラス名をバックティック (`) で囲み、" " 演算子を使用して連結します。例:

const className = `class1 class2 class3`;

あなたの場合、テンプレート リテラルを使用するように AccountMainMenu コンポーネントの render メソッドを変更できます。

render() {
  var self = this;
  // ...

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

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

          const className = `${activeClass} ${data.class} main-class`;

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

このアプローチにより、複数のクラスが確実に正しく追加されます。複雑な文字列操作や潜在的なエラーを必要とせずに className 属性を取得できます。

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