javascript - 迭代数据并映射到不同的组件

Question

我想以交替的方式左右浮动一组组件。我似乎找不到使用 props 使其工作的方法。

这就是我正在尝试做的事情:

const Calendar = ({events}) => (
  <div>
    <Title/>
    <div className="events">
      {events.events.map(event =>
      <EventCard key={Math.random()} event={event} align="left"/>,
      <EventCard key={Math.random()} event={event} align="right"/>
      )}
    </div>
  </div>
)

但是我只收到带有 align="left" 属性的组件。你能告诉我如何改变这个映射吗？

Answer 1

您必须将它们都包装在父元素中。您只得到一个的原因是因为逗号，它被解释为传递给 map 的另一个参数。例如:

{
  events.events.map(event =>
    <div>
      <EventCard key={Math.random()} event={event} align="left"/>
      <EventCard key={Math.random()} event={event} align="right"/>
    </div>
  )
}

我强烈建议使用除随机数作为键之外的其他方法，因为这是一种反模式。 React 需要某种可预测的数字来保证键的唯一性，而随机数则不然。

如果你不喜欢额外的元素，并且使用的是 React 16，你可以使用他们的新功能，返回子元素数组而不是父元素:

{
  events.events.map(event =>
    [
      <EventCard key={Math.random()} event={event} align="left"/>,
      <EventCard key={Math.random()} event={event} align="right"/>
    ]
  )
}

再次，我强烈建议使用除 Math.random 之外的其他内容，例如为每个事件指定一个特定 ID。