如何动态向 ReactJS 组件添加多个类？

向 ReactJS 组件动态添加多个类

使用 ReactJS 时，您可能会遇到需要向元素的 className 添加多个类的情况属性。为了避免潜在的错误或混乱，ES6 模板文字提供了一个优雅的解决方案。

要实现此目的，请使用模板文字将类名称括在反引号 (`) 内，并使用“”运算符将它们连接起来。例如：

const className = `class1 class2 class3`;

在您的情况下，您可以修改 AccountMainMenu 组件的渲染方法以使用模板文字：

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