Question

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

但是我无法弄清楚如何将两个元素映射到一个HTML元素，因为这些元素必须被关闭。

这是我想做的一个例子。在className =＆＃34; row＆＃34;的包含元素内映射两个组件。但我不能，因为必须关闭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>
  );
}

Answer 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>
  )
}

Answer 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>
));

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

2 个答案: