向活动幻灯片添加类

Question

我有一个元素数组：[0， 1， 2， 3， 4， 5， 6，7]。 此外，我还有一个由三个数字组成的数组(this.state.currentSlides(，它指示我需要从第一个数组中向哪个元素添加一个类：[0， 1， 2] 或 [3， 4， 5] 或 [5， 6， 7]。 按钮滚动到下一张或上一张幻灯片。 下面的代码在第一次渲染时只工作一次。如何将当前类("幻灯片电流"(动态添加到所有元素中的 3 个？

checkClass(i) {
var className;
className = '';
for (var k = 0; k < this.state.currentSlides.length; k++) {
if (k == i) {
className = ' slide-current '
}
}
return className;
}
createSlides() {
var arr = [];
this.props.order.orders.map((item, i) =>{ 
arr.push(<div key={i} className={this.checkClass(i)}>element</div>);
});
return arr;
}
onNextClick() {
this.setState({
currentSlides: this.state.currentSlides.map((item, i) => {
item += 3;
return item })
})}
render() {
return <div>
{this.createSlides()}
<button onClick={ e => { this.onNextClick() }}>Next</button>
<button onClick={ e => { this.onPreviousClick() }}>Previous</button>
</div>
}

this.props.order.orders 是对象的数组。例如：

[[{ title: 'Pizza'}],
[{ title: 'Pizza'}, { title: 'Cola'}, { title: 'Maffin'}],
[{ title: 'Maffin'}],
[{ title: 'Coffee'}],
[{ title: 'Pizza'}],
[{ title: 'Pizza'}, { title: 'Cola'}, { title: 'Maffin'}],
[{ title: 'Maffin'}],
[{ title: 'Coffee'}]];

Answer 1

你对其余部分很好。只需更改下面的功能即可使其工作。 将实际值(即 this.state.currentSlides[k] 与当前幻灯片值进行比较，即您正在将索引与值进行比较。

checkClass(i) {
var className;
className = '';
for (var k = 0; k < this.state.currentSlides.length; k++) {
if (this.state.currentSlides[k] == i) {
className = ' slide-current '
}
}
return className;
}