如何基于prop在文件中动态导入react组件答案

【问题标题】：How to dynamically import react component inside file based on prop如何基于prop在文件中动态导入react组件
【发布时间】：2021-09-23 05:17:08
【问题描述】：

我有一个文件（在本例中为 Test.js），将来会有许多小组件（目前只有 Test 和 SuperTest）。

我不想导入整个文件以优化性能。我尝试只导入我需要的组件。不是整个文件。

在示例中，prop 可以是“Test”或“SuperTest”。它抛出一个错误Unexpected token (7:26) 有没有办法做到这一点？然后将其渲染到 App 中？

App.js

import { useState } from 'react';
// import Test from './Test';

function App({prop}) {
  const [Comp, setComp] = useState(null);

  import('./Test').then(({`${prop}`: newComp}) => { // This is an ERROR
    console.log(typeof newComp); // Object
    setIcon(() => newComp);
  });

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

export default App;

Test.js

export const Test = () => {
  return (
    <div>
      Hello People
    </div>
  );
}

export const SuperTest = () => {
  return (
    <div>
      Hello People 2
    </div>
  );
}

【问题讨论】：

This post might be pertinent.
我们的好奇心；为什么要在一个文件中添加许多组件？将组件拆分为自己的文件不是更传统和方便吗？无论哪种方式，当您从react 导入useState 时，您已经在使用named imports。为什么不以同样的方式导入组件 - 反正你已经单独导出它们了！
使用import { Test } from './Test';有什么问题？导入通常不会影响性能（除非您指的是输出的包大小，但还有其他解决方案），因为它们是在编译代码时使用的，而不是运行它。见Code Splitting。
@DrewReese 将来，我会在里面有很多函数，并且不想每次用户只需要其中一个时都将它们都放在 webpack 包中。您引用的其他解决方案是什么？
由于不清楚您关心优化什么样的性能，我将您的问题解释为关于运行性能（速度、内存使用量等）。我引用的替代方案是关于包大小优化，特别是摇树：webpack.js.org/guides/tree-shaking

标签： javascript reactjs react-hooks

【解决方案1】：

如果您想在单个文件中使用多个函数/组件并且必须动态调用该函数，请尝试以下代码。

在Test.js文件中添加getData()函数来调用该函数。

Test.js

const Test = () => {
  return (
    <div>
      Hello People
    </div>
  );
}

const SuperTest = () => {
  return (
    <div>
      Hello People 2
    </div>
  );
}   

export function getData(fnName) {
  switch (fnName) {
  case "Test":
    return Test();
  default:
    return SuperTest();
  }
}

调用 getData() 函数并将您的道具作为参数传递

App.js

import("./Test").then((fn) => {
  let newComp = fn.getData({prop}));
  // use above newComp value
});

【讨论】：

这是个好主意。不幸的是，它仍然在 webpack 包中包含这两个功能。我的全部目的是仅在捆绑包中包含我将使用的函数（在示例 Test 或 SuperTest 中）。所以我可以按需加载。将来，我将拥有更多功能，并且无法在用户只需要一个时加载所有内容。

【解决方案2】：

不要在这个 {props} 中包装道具。试试这个：

function App(prop) {
  const [Comp, setComp] = useState(null);

【讨论】：