React中将已初始化组件列表作为props传递后页面空白如何解决

问题原因 #

React 规定自定义组件必须以大写字母开头，小写开头的标签会被识别为原生 HTML 元素，不会匹配你定义的函数组件，因此无法渲染对应内容，导致页面空白。

修正方案 #

将你定义的三个组件 prim、sec、comp 全部改为大写开头的命名，调用时对应使用大写标签即可，修正后的完整代码如下：

const Prim = ({ text }) => <h1>{text}</h1>;

const Sec = ({ text }) => <h2>{text}</h2>;

const Comp = ({ prims, secs }) => (
  <>
    <div className="prim-class">{prims}</div>
    <div className="sec-class">{secs}</div>
  </>
);

export default function App() {
  return (
    <div>
      <Comp
        prims={[<Prim text="AA" key="prim1" />, <Prim text="BB" key="prim2" />]}
        secs={[<Sec text="CC" key="sec1" />]}
      />
    </div>
  );
}

补充说明 #

你之前直接调用函数生成元素的写法并没有违反 React 最佳实践，本质是把函数当作普通工具函数生成 React 元素，只有当你需要在组件内部使用 Hooks、维护内部状态或生命周期时，才需要写成标准组件的形式。

内容的提问来源于stack exchange，提问作者AlwaysLearning