javascript - 多个元素上的切换类 react

Question

我得到了渲染的过滤器数组，通过单击元素，我将它们推送到 selectedProperties 数组，而且如果它在数组中，我还想在元素上设置事件类。如何正确地使用react？我得到了下一个代码

...
render(){
  const {selectedProperties} = this.state;
  let classnames = classNames('box', {
    'active': '' //what condition apply here to set class?
  });
return (
  <div className="hotel-filter">
    <div className="filter-label">Что для вас важно?</div>
    <div className="filter-options">
      <ul className="priorities-boxes">
        {
          this.state.priorities.map(item => {
            return (
              <li key={item.id}
                  className={classnames}
                  onClick={(evt) => this.selectValue(item.id)}>
                <img src={`/images/filter-icons/${item.icon}`} />
                <span>{item.name}</span>
              </li>
            )
          })
        }
      </ul>
    </div>
  </div>
)
}

我正在使用类名实用程序动态添加类，但我的条件是错误的。

Answer 1

您需要引用 item 以检查它是否在所选数组中，这不能在循环外完成，否则一切都会相同，所以只需在循环内执行即可对于每个项目

render(){
  const {selectedProperties} = this.state
  return (
    <div className="hotel-filter">
      <div className="filter-label">Что для вас важно?</div>
      <div className="filter-options">
        <ul className="priorities-boxes">
          {
            this.state.priorities.map(item => {
              return (
                <li key={item.id}
                    className={classNames('box', {
                      active: selectedProperties.includes(item.id)
                    })}
                    onClick={(evt) => this.selectValue(item.id)}>
                  <img src={`/images/filter-icons/${item.icon}`} />
                  <span>{item.name}</span>
                </li>
              )
            })
          }
        </ul>
      </div>
    </div>
  )
}