Javascript 在选择值change-React时，以惰性方式渲染组件

如何在选择值更改时延迟渲染组件

这是我下面的代码片段，我看不到标题，没有任何渲染

App.js

ChildComponents.js

---

所以根据选择，我只需要加载这个组件，我是反应的新手，读到我们可以使用react.lazy，但我没有看到任何这样的用例。无论何时更改，它都不应该再次构建dom。如果我们使用useMemo，我不清楚使用React.memo还是useMemo，哪一个更好。

您需要调用函数组件：

// Component is a function component
const Component = (title = "section one") => <SectionOne title={title} />;

// Invoke it
<Component/>

---

获取此问题，但导入正确，元素类型无效：内置组件应为字符串，复合组件应为类/函数，但获取：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。还有，对于上述方法使用lazy和useMemo的想法，示例代码片段，如回答中所述进行了更改，但仍然不起作用@Dennish，您可以在其中找到codesandbox，你有什么想法吗？你的沙箱里有很多错误，我修正了它们，但这与你问的问题无关。如果你有更多问题，只要问一个新问题：给我贴标签

import React from "react";

export const SectionOne = ({ title }) => {
  return <h1>{title}</h1>;
};

export const SectionTwo = ({ title }) => {
  return <h2>{title}</h2>;
};

// Component is a function component
const Component = (title = "section one") => <SectionOne title={title} />;

// Invoke it
<Component/>

const sectionToBeDisplayed = {
  section_one: ...
};

export default function App() {
  ...

  const SectionComponent = sectionToBeDisplayed[state];

  return (
    <div className="App">
      ...
      <SectionComponent />
    </div>
  );
}