Javascript 如何将css类添加到react中的组件？

所以基本上我所做的是遍历一个数据数组，并制作某种列表。我想在这里实现的是单击css类应该附加的特定列表项

反复制作列表

var sports = allSports.sportList.map((sport) => {
return (
  <SportItem icon= {sport.colorIcon} text = {sport.name} onClick={this.handleClick()} key= {sport.id}/>
)
})

var-sports=allSports.sportList.map（（运动）=>{
返回(
)
})

单个列表项

   <div className="display-type icon-pad ">
      <div className="icons link">
        <img className="sport-icon" src={icon}/>
      </div>
      <p className="text-center">{text}</p>
    </div>

{text}

我不知道如何使用handleClick，因此如果我单击某个特定列表，它会突出显示。

为可以选择的每个项目保留一个单独的变量，并使用库有条件地像facebook一样操作类

编辑：好的，您提到过一次只能选择一个元素，这意味着我们只需要存储其中的一个元素（我将使用所选项目的id）。我还注意到您的代码中有一个输入错误，您需要在声明组件时链接函数，而不是调用它

<SportItem onClick={this.handleClick} ...

正如我所说的，我们希望将所选项目的id存储在状态中，因此

handleClick

可以如下所示：

handleClick(id,event){
this.setState({selectedItemId: id})
...
}

现在我们需要将

selectedItemId

传递给

SportItem

实例，以便它们知道当前选择：

---

如果要突出显示特定列表项，最好在列表项本身上调用

handleClick

函数，使用这种方法可以更准确地添加CSS类

下面是我实现单列表组件的示例代码

var SingleListItem = React.createClass({
getInitialState: function() {
    return {
        isClicked: false
    };
},
handleClick: function() {
    this.setState({
        isClicked: true
    })
},
render: function() {
    var isClicked = this.state.isClicked;
    var style = {
        'background-color': ''
    };
    if (isClicked) {
        style = {
            'background-color': '#D3D3D3'
        };
    }
    return (
        <li onClick={this.handleClick} style={style}>{this.props.text}</li>
    );
  }
});

var SingleListItem=React.createClass({
getInitialState:函数（）{
返回{
isClicked:错误
};
},
handleClick:function（）{
这是我的国家({
艾斯克利克：是的
})
},
render:function（）{
var isClicked=this.state.isClicked；
变量样式={
“背景色”：”
};
如果（已单击）{
样式={
“背景色”：“D3”
};
}
返回(
{this.props.text}
);
}
});

对于每个项目，它不必是一个新变量，它可以是一个名为

selected:[]

的单个数组。类名库也不是必需的，但在某些情况下会有所帮助。是的，当然你也可以这样做。我只是提供了一个简单易懂的解决方案。一旦他这么做了，我相信他会把它折射成更有效的东西，谢谢。有没有这样的工作实例？我对react很陌生。我想在这里实现的是一次只有一次应该被高度重视Hey Igorsvee在最后一个表达式中，您如何从子对象“this.state.selectedItemId”访问父对象的状态？

<div onClick={this.props.onClick} className={classNames('foo', { myClass: this.props.selectedItemId == this.props.key}); // => the div will always have 'foo' class but 'myClass' will be added only if this is the element that's currently selected}>
</div>

var SingleListItem = React.createClass({
getInitialState: function() {
    return {
        isClicked: false
    };
},
handleClick: function() {
    this.setState({
        isClicked: true
    })
},
render: function() {
    var isClicked = this.state.isClicked;
    var style = {
        'background-color': ''
    };
    if (isClicked) {
        style = {
            'background-color': '#D3D3D3'
        };
    }
    return (
        <li onClick={this.handleClick} style={style}>{this.props.text}</li>
    );
  }
});