javascript - 将className添加到li item React中

Question

当用户单击按钮时，我尝试更新事件类。每次单击下一项上的此按钮时，都应在前一项中添加和删除类名 active。使用 jQuery，我可以使用 addClass 和 removeClass 方法。沿着这些思路的一些东西会让我开始。

$("button").click(function() {
    $("ul li").removeClass("active");
   var length = $(this).prevAll().length;
   $("ul li:eq(" + length + ")").addClass("active");
});

我不知道应该如何使用 React 来实现这个。

我已经设置了a JSFIDDLE here .

var App = React.createClass({

    getInitialState: function(){

        return {
            active: 0
        }
    },

    incrementIndex: function() {
        this.setState({active : this.state.active + 1});    
    },

    render: function () {
        return(
            <div>
                <ArtistList active={this.state.active}  />
                <Button increment={this.incrementIndex} />
            </div>
        )
    }

});

var ArtistList = React.createClass({

    render: function() {

        return(
            <ul>
                <li className="active">Michael Jackson</li>
                <li>Bob Dylan</li>
                <li>Kendrick Lamar</li>
            </ul>
        )
    }

});

var Button = React.createClass({
    render: function() {
        return(
            <button onClick={this.props.increment}>next</button>
        )
    }
})

Answer 1

您可以通过迭代包含列表内容的数组来动态生成列表元素。然后您可以简单地将传递的 prop 与当前迭代进行比较:

var data = ['Michael Jackson', 'Bob Dylan', 'Kendrick Lama'];
var listItems = data.map((value, index) => (
  <li
    key={value} 
    className={this.props.active === index ? 'active' : ''}>
    {value}
  </li>
));

return <ul>{listItems}</ul>;