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。

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

1 个答案: