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

Question

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

迭代制作列表

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

单个列表项

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

我无法弄清楚如何处理 handleClick，以便在我单击特定列表时它会突出显示。

Answer 1

如果你想突出显示特定的列表项，最好在列表项本身上调用 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>
    );
  }
});