如何向 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中文网其他相关文章！