react tsx render中数组map中加判断

可以使用条件操作符 (ternary operator) 在 map 中加入判断，例如：

{arr.map(item => (
  item.condition ? <div>{item.content}</div> : null
))}

这样就可以根据 condition 条件的结果来决定是否渲染 content 内容了。

相关问题

react tsx render中数组map加判断

可以使用 Array.prototype.filter() 函数来过滤数组中不符合条件的元素，然后再使用 Array.prototype.map() 函数在过滤后的数组上进行操作。以下是一个示例代码：

import React from 'react';

interface Person {
  name: string;
  age: number;
}

const people: Person[] = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 37 },
  { name: 'Charlie', age: 18 },
  { name: 'Diana', age: 42 },
];

const App: React.FC = () => {
  return (
    <div>
      {people
        .filter(person => person.age >= 30)
        .map(person => (
          <div key={person.name}>{person.name} ({person.age})</div>
        ))}
    </div>
  );
};

export default App;

这个示例代码中，我们首先定义了一个 Person 接口来描述每个人的名字和年龄，然后定义了一个数组 people 来存储多个 Person 对象。接着我们定义一个 App 组件来渲染这些人的名字和年龄，我们使用 Array.prototype.filter() 函数来过滤出年龄大于等于 30 的人，并使用 Array.prototype.map() 函数在过滤后的数组上进行操作。最后，我们将过滤后的结果以一组 div 标签的形式输出到 DOM 中。