React中如何渲染已定义的Page对象？添加后页面空白求解

你当前定义的Page是一个JSX元素，而非标准React组件，直接用组件的方式调用会导致渲染失败，页面空白。以下两种方式可以正确渲染它：

方式一：直接插入JSX元素 #

直接在root.render的JSX结构中通过{Page}插入这个预定义的JSX元素，确保所有子元素被同一个父容器（或React.Fragment）包裹即可：

root.render(
  <React.StrictMode>
    <Navbar />
    <MainContent />
    {Page} {/* 直接插入已定义的JSX元素 */}
  </React.StrictMode>
);

方式二：将Page转为标准函数组件 #

把Page改写为React函数组件，之后就能像Navbar、MainContent一样用<Page />的方式调用：

// 改写为函数组件
const Page = () => {
  return (
    <div>
      <h2>This is react</h2>
      <p>This is a paragraph</p>
    </div>
  );
};

// 在render中调用组件
root.render(
  <React.StrictMode>
    <Navbar />
    <MainContent />
    <Page /> {/* 作为组件调用 */}
  </React.StrictMode>
);

为什么之前会空白？ #

如果之前你尝试用<Page />调用，但Page本质是JSX元素而非函数/类组件，React会将其识别为自定义组件进行解析，这不符合React组件的定义要求，会触发渲染错误，最终导致页面空白。

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