将数组映射到行内的 JSX 元素答案

【问题标题】：Mapping array to JSX elements inside rows将数组映射到行内的 JSX 元素
【发布时间】：2017-11-28 20:01:54
【问题描述】：

使用 React 我正在尝试将元素数组映射到包含 HTML 元素。

但是我不知道如何将两个元素映射到一个 HTML 元素中，因为这些元素必须被关闭。

这是我想做的一个例子。在 className="row" 的包含元素内映射两个组件，但我不能，因为 JSX 元素必须关闭：

const CalendarGrid = (events) => {
  let content = [];
  events.events.map((event, index) =>{

    if (index % 2 != 0) {
        content.push(
          <div className="row">   
          <EventCardRight key={event.id} event={event} align="right"/>
        )
      }if (index % 2 == 0)
      {
          content.push(
            <EventCardLeft key={event.id} event={event} />
            </div className="row">   
          );
      }

  });
  return (
    <div>
        {content}
    </div>
  );
}

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

您可以利用inline logical operators 并直接映射events 为：

const CalendarGrid = (events) => {
  return (
    <div>
      {events.events.map((event, index) => 
        <div key={event.id} className="row">
          {index % 2 != 0 ? (
            <EventCardRight key={event.id} event={event} align="right"/>
          ) : (
            <EventCardLeft key={event.id} event={event} />
          )}
        </div>
      )}
    </div>
  )
}

【讨论】：

【解决方案2】：

首先，我会将您的数组拆分为大小为 2 的块。请参阅 How to split a long array into smaller arrays, with JavaScript，我将为此使用 lodash：

const rows = _.chunk(events.events, 2);

现在我可以简单地将每个 row 映射到元素：

const content = rows.map((rowEvents, index) => (
   <div key={index} className="row">
      <EventCardRight event={rowEvents[0]} align="right" />
      <EventCardLeft event={rowEvents[1]} />
   </div>
));

【讨论】：