javascript - 在 map 函数内的 div 元素上切换 isActive className

Question

所以我在 map 函数中生成了一堆元素

{Items.map((item, i) => (
        <div className='nav col-4' key={i}>
          <div className={be('Items', 'item', props.isActive ? 'isActive' : '')} onClick={props.handleActive} key={title}>
            <span>{I18n.translate(`item.${title}`)}</span>
          </div>
        </div>
      ))}

props.isActive 类应该只突出显示被点击的一项。现在它突出显示了所有这些。我知道如何使用 map 函数之外的功能，但在这里我有点挣扎。

handleActive 只是切换 isActive 状态

有什么想法吗？

Answer 1

   handleClick = (id) => {
    this.props.handleActive(id)

   }    



{Items.map((item, i) => (
            <div className='nav col-4' key={i}>
              <div className={be('Items', 'item', props.isActive ? 'isActive' : '')} onClick={()=>this.handleClick(i)} key={title}>
                <span>{I18n.translate(`item.${title}`)}</span>
              </div>
            </div>
          ))}

在父组件中，handleActive 将使用 id 调用。您可以在那里设置 isActive 属性。

并且在子组件中，item会被设置为active或者inactive