反应。将不同的数据阵列加载到光滑的滑块中

Posted 2021-03-27

所以在这个阶段我有一个组件，我在其中绘制一个滑块，其中的照片是到某些房间的路线。现在的任务是将滑块带到一个单独的页面（组件）...将打开页面：通过不同数组的房间/新闻/促销。是否可以在反应堆中执行此操作，或者这是一个不好的情况，这个任务需要以不同的方式解决，我甚至不明白该怎么做

  <Slider ref={slider => (this.slider = slider)} {...settings}>
      {RoomsService.rooms.map(room => {
        return (
          <div className="rooms_slider">
            {room.title === 'Soon' ? (
              <img src={room.img} />
            ) : (
              <Link to={`/rooms/${room.id}`}>
                <img src={room.img} />
              </Link>
            )}

          </div>
        );
      })}

    </Slider>

答案

我不太确定你的问题是什么，但是你应该能够把你用滑块做的所有东西都抽象出来，然后把它抽象成一个你只需要传递道具的组件。

const CustomSlider = ({rooms, settings}) => {
  return (

    <Slider ref={slider => (this.slider = slider)} {...settings}>
      {rooms.map(room => {
        return (
          <div className="rooms_slider">
            {room.title === 'Soon' ? (
              <img src={room.img} />
            ) : (
              <Link to={`/rooms/${room.id}`}>
                <img src={room.img} />
              </Link>
            )}

          </div>
        );
      })}

    </Slider>
  )
};

<CustomSlider rooms={[{title,  img, id}]} settings={someSettingObj} />

从这里，您可以根据可用的道具有条件地渲染事物。