遍历数据并映射到不同的组件

Question

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

这就是我想要做的：

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。