React中组件的旋转木马？

Question

我正在用React构建一个网站，对于“新闻”部分，我有一个代表不同新闻的3个组件的列表。它们属于flexbox，我正在努力使它们具有响应性。对于移动设备，我希望只显示3个组件中的一个，并具有单击2个箭头浏览新闻的能力。与普通的图像传送带类似，但由组件组成。我如何才能做到这一点？These are the components

我把所有“新闻”放在那里的代码

  render() {
let content = <div>Loading...</div>;
if (!this.state.isLoading) {
  content = (
    <Aux>
      <New
        image={img1}
        title={this.state.news[0].title}
        text={this.state.news[0].text}
        date={this.state.news[0].date}
        classes="new-1"
      />
      <New
        image={img2}
        title={this.state.news[1].title}
        text={this.state.news[1].text}
        date={this.state.news[1].date}
        classes="new-2"
      />
      <New
        image={img3}
        title={this.state.news[2].title}
        text={this.state.news[2].text}
        date={this.state.news[2].date}
      />
    </Aux>
  );
}
return content;

}

这是“新”组件

   const New = props => {
  const imageStyle = {
    backgroundImage: `url(${props.image})`
  };

  return (
    <div className={`new-wrapper ${props.classes}`}>
      <div className="new-image" style={imageStyle}></div>
      <div className="new-content">
        <h4>{props.title}</h4>

        <div className="text-wrapper">
          <p>{props.text}</p>
        </div>

        <div className="date">
          <span>{props.date}</span>
        </div>
      </div>
    </div>
  );
};

Answer 1

为了达到你想要的效果，我会使用像https://react-slick.neostack.com/这样的旋转木马插件

你可以设置它在桌面上显示三张幻灯片，在移动设备上只显示一张幻灯片，这样你就可以让箭头穿过新闻卡片。

我还会通过使用map函数来呈现所有新闻来循环数组的每个元素。这样，它将为状态或数组中的每个元素动态创建一个新闻卡片。请参阅此示例How to render an array of objects in React?

希望这能有所帮助！