使用map在react中循环数组时返回null而不是JSX

Question

我正在使用 React 循环访问对象数组array.map。该数组采用以下形式：

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

我使用 循环遍历数组，如果不是则seasons.map返回 JSX ，否则返回。air_datenullnull

 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）。在react中推荐吗？我不想使用for循环。

Answer 1

是的，推荐这样做。

如果您有条件或可选组件，那么返回null意味着“无组件”或“无 JSX”是可行的方法。

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

如果您不喜欢返回 null 的想法，您可以随时.filter(c => c !== null)在末尾添加 a ，但这确实没有必要。