reactjs - 如何在react-id-swiper中将初始事件幻灯片设置为不同索引？

Question

我正在使用react-id-swiper一切都很完美，但我需要将初始事件幻灯片设置为其他索引。现在默认设置为第一张幻灯片；举例来说，假设我有一个 JSON 文件，其中包含一些 slider 内容，并且卡 #5 在页面加载时必须处于事件状态。我怎样才能做到这一点？

import React, { Component } from 'react';
// import Swiper from 'react-id-swiper';
import Swiper from '@mootzy/react-id-swiper';

class Swipe extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            params: {
                effect: 'coverflow',
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: 'auto',
                activeSlideKey: '5',
                coverflowEffect: {
                  rotate: 50,
                  stretch: 0,
                  depth: 100,
                  modifier: 1,
                  slideShadows: true
                }
              }
         }
        
    }

    componentDidMount() {
        setTimeout(() => this.setState({ 
            params: {
                activeSlideKey: 5
              }
         }), 500)
    }

    render() { 
        return ( 
            <Swiper {...this.state.params} activeSlideKey='5'>
                <div>0</div>
                <div>5</div>
                <div>10</div>
                   ...
                <div>100</div>
            </Swiper>
         );
    }
}
 
export default Swipe;

Answer 1

activeSlideKey 不起作用，因为每张卡都没有任何键值。

render() { 
    return ( 
        <Swiper {...this.state.params} activeSlideKey='5'>
            <div key='0'>0</div>
            <div key='5'>5</div>
            <div key='10'>10</div>
               ...
            // Add key='value'
            <div key='100'>100</div>
        </Swiper>
     );
}