在react中，用antd-mobile，动态渲染了几个swiper.item，每个里面都有一个子组件，可是打开测试四个swiper.item发现都同时渲染了，怎么才能只渲染一个组件？

Question

如图，进入页面之后，默认渲染的是“水果选项”，我只想渲染“水果”选项，可是一进入页面，react antd-mobiel就渲染了所有的选项（即水果，蔬菜，动物，法克鱿）

//测试map标签映射数组中的分类为swiper

const test1 = [1, 2, 3, 4]
//console.log(test1.map((item) => item -= 3))
//console.log(test1)
const test1Li = test1.map((item) => <li>{item}哈哈</li>)
const test1SwiperItem = test1.map((item) =>
    <Swiper.Item key={item.toString()}>
        <div className='content'>
            <GetPullToRefreshlData itemKey={item.toString()}></GetPullToRefreshlData>
        </div>
    </Swiper.Item>)



          <Swiper
            direction="horizontal"
            loop={true}
            indicator={() => null}
            ref={swiperRef}
            defaultIndex={activeIndex}
            onIndexChange={(index) => {
                setActiveIndex(index);
            }}
        >
            {test1SwiperItem}

        </Swiper>

Answer 1

Swiper 组件的设计逻辑就是这样的：渲染全部的 Item.

如果想实现你的需求，可以考虑自己控制渲染逻辑，方法有很多，比如：拿到 activeIndex 后，控制你要渲染的 Item 即可。