Question

所以我在地图功能

中生成了一堆项目

./public

props.isActive类应该只突出显示单击的一个项目。现在它突出了所有这些。我知道如何在地图功能之外，但在这里我有点蠢蠢欲动。

{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> ))}只是切换isActive的状态

有什么想法吗？

Answer 1

您正在对所有项目测试相同的props.isActive。你需要保持一个内部状态，并保持点击哪个项目的状态。

props.isActive ? 'isActive' : ''

Answer 2

   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 道具。

在子组件中，该项目将设置为活动或非活动

在map函数中的div元素上切换isActive className

2 个答案: