Question

我有一系列元素：[0,1,2,3,4,5,6,7]。此外，我有一个三个数字的数组（this.state.currentSlides），它指示我需要添加一个类的第一个数组中的哪个元素：[0,1,2]或[3,4,5]或[5， 6,7]。按钮滚动到下一个或上一个3幻灯片。下面的代码只有一次与第一次渲染。如何动态地将当前类（＆＃39;幻灯片当前＆＃39;）添加到所有元素中的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]与currentSlide值，即i。你正在将指数与价值进行比较。

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

将一个类添加到活动幻灯片

1 个答案: