使用条件内部地图渲染React JSX的问题

Question

情况1）我试图使用map和三元运算符有条件地进行渲染。在这里，我遍历对象数组，然后仅渲染其中的前六个对象。试图达到相同的目的，但似乎并不可行。

我们将不胜感激

对象

const recentEventsData = [
  { key: "01", text: "AAA", timestamp: "11:52:27:02 02-11-2019" },
  { key: "02", text: "BBB", timestamp: "11:52:29:02 02-11-2019" },
  { key: "03", text: "CCC", timestamp: "11:52:30:02 02-11-2019" }
];

内部render（）

{
  recentEventsData.map((data, index) => {
    {
      index < 6 ? (
        <div key={index}>
          //Want the transformed output here , that is fourth value from object
          <p>{data.text}</p>
          <p>{data.timestamp}</p>
          <hr />
        </div>
      ) : null;
    }
  });
}

Answer 1

使用splice并删除内部的{}括号，因为.map()需要返回值才能正常工作。

  

splice（）方法可将项目添加到数组中/从数组中删除，并返回删除的项目。

{
  recentEventsData.slice(0, 6).map((data, index) => (
        <div key={index}>
          <p>{data.text}</p>
          <p>{data.timestamp}</p>
          <hr />
        </div>
      )
  );
}

Answer 2

当您要注入JavaScript表达式时，只需在JSX中使用{}，因此在为map提供的函数中，无需创建新块。

由于已为函数赋予主体，因此还需要显式返回结果。

{recentEventsData.map((data, index) => {
  return index < 6 ? (
    <div key={index}>
      <p>{data.text}</p>
      <p>{data.timestamp}</p>
      <hr />
    </div>
  ) : null;
})}

您可以在使用null之前slice，而不用检查索引并返回其余元素的map。

{recentEventsData.slice(0, 6).map((data, index) => (
  <div key={index}>
    <p>{data.text}</p>
    <p>{data.timestamp}</p>
    <hr />
  </div>
))}

Answer 3

您应该使用return关键字来返回值。