Javascript 将类名添加到li项目中

当用户单击按钮时，我试图更新活动类。每次单击此按钮时，下一个项目都应添加类名

active

，并将其从上一个项目中删除。使用jQuery，我可以使用

addClass

和

removeClass

方法。沿着这条路线的一些东西会让我开始

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

我不确定应该如何使用react来实现此功能

我已经准备好了

var-App=React.createClass({
getInitialState:函数（）{
返回{
活动：0
}
},
递增索引：函数（）{
this.setState（{active:this.state.active+1}）；
},
渲染：函数（）{
返回(
)
}
});
var ArtistList=React.createClass({
render:function（）{
返回(

迈克尔·杰克逊
鲍勃·迪伦
肯德里克·拉马尔

)
}
});
var按钮=React.createClass({
render:function（）{
返回(
下一个
)
}
})

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

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>;

var数据=['Michael Jackson'、'Bob Dylan'、'Kendrick Lama']；
var listItems=data.map（（值，索引）=>(

{value}

));
返回
{listItems}
；

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

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>;

var数据=['Michael Jackson'、'Bob Dylan'、'Kendrick Lama']；
var listItems=data.map（（值，索引）=>(

{value}

));
返回
{listItems}
；

我会将艺术家作为道具传递给ArtistList，然后在AristList中使用map函数生成li的列表，并使用三元来确定它是否应该处于活动状态

笔在这儿吗

var-App=React.createClass({
getInitialState:函数（）{
返回{
活动：0
}
},
递增索引：函数（）{
this.setState（{active:this.state.active+1}）；
},
渲染：函数（）{
const artistList=['Michael Jackson'、'Bob Dylan'、'Kendrick Lamar']
返回(
)
}
});
var ArtistList=React.createClass({
渲染器：函数（）{
var self=这个；
返回此.props.artists.map（函数（艺术家，索引）{
var classes=index==self.props.active？'active'：''；
return
{artist}
});
},
render:function（）{
让艺术家=这个。渲染者（）；
返回(

{艺术家}

)
}
});
var按钮=React.createClass({
render:function（）{
返回(
下一个
)
}
})
ReactDOM.render（，document.getElementById（'app'））；

我会将艺术家作为道具传递给ArtistList，然后在AristList中使用map函数生成li的列表，并使用三元来确定它是否应该处于活动状态

笔在这儿吗

var-App=React.createClass({
getInitialState:函数（）{
返回{
活动：0
}
},
递增索引：函数（）{
this.setState（{active:this.state.active+1}）；
},
渲染：函数（）{
const artistList=['Michael Jackson'、'Bob Dylan'、'Kendrick Lamar']
返回(
)
}
});
var ArtistList=React.createClass({
渲染器：函数（）{
var self=这个；
返回此.props.artists.map（函数（艺术家，索引）{
var classes=index==self.props.active？'active'：''；
return
{artist}
});
},
render:function（）{
让艺术家=这个。渲染者（）；
返回(

{艺术家}

)
}
});
var按钮=React.createClass({
render:function（）{
返回(
下一个
)
}
})
ReactDOM.render（，document.getElementById（'app'））；

这里有几个步骤需要执行，您可能需要让问题更加具体，因为您不清楚需要帮助的部分。我首先向

ArtistList

类的

props

添加一个参数，确定哪个列表项具有活动的

类。如果您不知道如何使用道具，或者如何有条件地将类应用于元素，那么这两个问题本身都是合适的候选问题。谢谢Chris。我确实知道如何使用道具，但我认为有条件地将类添加到元素可能是我需要更详细了解的事情。这里有几个步骤需要执行，您可能需要让问题更具体，因为不清楚您需要帮助的部分。我首先向

ArtistList

类的

props

添加一个参数，确定哪个列表项具有活动的

类。如果您不知道如何使用道具，或者如何有条件地将类应用于元素，那么这两个问题本身都是合适的候选问题。谢谢Chris。我确实知道如何使用道具，但我认为有条件地向元素添加类可能是我需要更详细了解的事情。没问题！一旦你习惯了React带来的范例，React就很棒了，当你从JQueryia来的时候，肯定需要一点时间

var App = React.createClass({

    getInitialState: function(){
        return {
            active: 0
        }
    },

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

    render: function () {
      const artistList = ['Michael Jackson', 'Bob Dylan', 'Kendrick Lamar']
        return(
            <div>
                <ArtistList artists={artistList} active={this.state.active}  />
                <Button increment={this.incrementIndex} />
            </div>
        )
    }

});

var ArtistList = React.createClass({

    renderArtists: function() {
      var self = this;
      return this.props.artists.map(function(artist, index) {
        var classes = index === self.props.active ? 'active' : '';
       return <li key={index + artist} className={classes} > { artist } </li>
      });
    },

    render: function() {
        let artists = this.renderArtists();
        return(
            <ul>
              {artists}
            </ul>
        )
    }

});

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

ReactDOM.render(<App />, document.getElementById('app'));