reactjs - 使用 if 条件内部映射渲染 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" }
];

内部渲染（）

{
  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

根据需要使用拼接并删除内{}括号.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 关键字返回值。