Javascript React：组件和阵列的条件渲染

在这里，我尝试将数组中的每个项目作为h1返回，因此打印到屏幕应该如下所示：

1
2
3
4
5

但是我得到了这个错误：

警告：图表（…）：必须返回有效的React元素（或null）。您可能返回了未定义、数组或其他无效对象

我怎样才能做到这一点

import React from 'react';

function NoCharts(props) {
  return <h1>No charts</h1>;
}

function Charts(props) {
  const myCharts = props.myCharts;
  if (myCharts.length > 0) {

    myCharts.forEach(function(chart) {
        return <h1>{chart}</h1>;
    });

  }
  return <NoCharts />;
}


export default class App extends React.Component {

  render() {

      let arr = [1,2,3,4,5];

    return (
      <div>

        <Charts myCharts={arr} />

      </div>
    )
  }
}

从“React”导入React；
功能诺查特（道具）{
不返回图表；
}
功能图（道具）{
const myCharts=props.myCharts；
如果（myCharts.length>0）{
myCharts.forEach（函数（图表）{
返回{chart}；
});
}
返回；
}
导出默认类App扩展React.Component{
render（）{
设arr=[1,2,3,4,5]；
返回(
)
}
}

您需要返回myCharts。当前，仅当数组为空时才返回某些内容

    return myCharts.forEach(function(chart) {
      return <h1>{chart}</h1>;
    });

返回myCharts.forEach（函数（图表）{
返回{chart}；
});

您必须“返回”一个有效的React元素，如错误所示-

图表（…）：必须返回有效的React元素（或null）。您可能返回了未定义、数组或其他无效对象

if（myCharts.length>0）{
const charts=myCharts.map（函数（图表）{
返回{chart}；
});
返回{charts}
}
否则{
返回；
}
}

这是正在运行的应用程序

if (myCharts.length > 0) {

    const charts = myCharts.map(function(chart) {
        return <h1>{chart}</h1>;
    });
    return <div>{charts}</div>

  }
  else {
     return <NoCharts />;
  }
}