如何為 ReactJS 元件新增多個類別？

在ReactJS 元件中加入多個類別

使用ReactJS 和JSX 時，您可能會遇到需要將多個類別應用於一個組件的情況單一成分。常見的情況是在聚焦或點擊元素時有條件地新增活動類別。

在您的範例中，您嘗試將多個類別新增至li 元素的className 屬性，如下所示：

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

但是，這種方法使用逗號運算子,，它僅連接字串而不添加空格。要正確新增多個類別，需要使用 ES6 範本文字功能。

在 AccountMainMenu 元件中，修改 render 方法如下：

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 屬性使用 template用空格連接多個類別的文字。透過內插 activeClass 和 data.class 變量，您可以有條件地應用所需的類別。

這種方法可讓您根據元件的狀態或 props 動態新增和刪除類，從而為 ReactJS 提供更大的靈活性和控制元件。

以上是如何為 ReactJS 元件新增多個類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！