Question

因此，在此阶段，我有一个组件，其中绘制了一个滑块，其照片是到达某些房间的路线。现在的任务是将滑块移到单独的页面（组件）...，该页面将为以下页面打开：房间/新闻/促销通过不同的数组。有可能在反应堆中这样做吗？还是坏情况，而这个任务需要以不同的方式解决，我什至不知道该怎么做

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

Answer 1

我不太确定您的问题是什么，但是您应该能够将使用滑条所做的所有事情都提取出来，并将其抽象为一个组件，只需将道具传递给它即可。

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

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

反应将不同的数据数组加载到光滑的滑块中

1 个答案: