React - 从选择/下拉列表中导入组件答案

【问题标题】：React - Import Components from select/dropdownReact - 从选择/下拉列表中导入组件
【发布时间】：2021-05-20 06:44:04
【问题描述】：

我要导入并显示一个组件，这取决于您从表单中选择的内容，选择。如果您输出值，我的选择就可以工作，但是如何导入组件并输出它？

我有一个带有 comp 的 useState，setComp 从选择中获取一个值，这样就可以了。但是那又怎样，我该如何让这部分工作..

 if(value==="xxxx"){
    import("./xxxx.js")
    setComponent(value)
} else if(value==="yyyy"){
    import("./yyyy.js")
    setComponent(value)
}

}

在原始表单标签的代码中再往下一点，我想输出我选择的组件。

【问题讨论】：

【解决方案1】：

'import' 和 'export' 只能出现在顶层

如果您尝试使用条件渲染来渲染组件，您需要执行以下操作：

export default function App() {
  return (
    <div className="App">
      {true ? <Xxxx /> : null}
    </div>
  );
}

如果想在运行时导入组件，您可能需要使用延迟加载.. 见this code splitting docs from react

【讨论】：