在使用 map 循环通过 arrays 时返回 null 而不是 JSX

Question

我正在使用array.map循环遍历一组对象。 该数组采用以下形式：

const seasons = [
             {air_date: null, episode_count: 6},
             {air_date: "2020-02-02", episode_count: 6}
           ]

我正在使用seasons.map遍历数组，如果air_date不是null和null则返回 JSX。

 seasons.map((season, index) => {
      if(season.air_date){
         return <span key = {season.id}> {season.episode_count} </span>
     }else{
        return null; // Is this recommended?
    }  
})

我从未见过有人这样做（返回null而不是JSX ）。 在反应中推荐吗？ 我不想使用for循环。

Answer 1

是的，这是推荐的。

如果您有条件或可选组件，则返回null表示“无组件”或“无 JSX”是 go 的方式。

此外，正如@k-wasilweski 所说，使用.map将数组转换为一系列组件是 React 的标准做法。

如果你不喜欢返回空值的想法，你可以在最后添加一个.filter(c => c !== null) ，但这真的没有必要。

Answer 2

没关系，但在 React 中更常见的是使用三元运算符：

seasons.map((season, index) =>
  season.air_date ? <span key={season.id}> {season.episode_count} </span> : null
);

就像下面评论中提到的@devserkan 一样，您甚至可以这样做：

seasons.map((season, index) =>
  season.air_date && <span key={season.id}> {season.episode_count} </span>
);