javascript - 如果该文件存在，则动态导入 React 组件，否则显示默认消息

Question

如果文件存在，我想有条件地导入 React 组件，如果不存在，则执行其他操作。例如显示默认 View 或消息。

我试过这个:

let Recipe;
try {
  Recipe = require(`docs/app/Recipes/${props.componentName}`);
} catch (e) {
  Recipe = () => <div>Not found</div>;
}

但是 linter 提示我不应该尝试动态要求一个文件，而是使用字符串文字。

对于我想要实现的目标，是否有更简洁的方法？

Answer 1

问题是这种方法会破坏捆绑优化并包含来自 docs/app/Recipes/ 的所有文件打包成一个包，即使它们没有被使用。

更好的写法是使用 <React.Suspense>和 React.lazy :

const Recipe = React.lazy(() =>
  import(`docs/app/Recipes/${props.componentName}`)
  .catch(() => ({ default: () => <div>Not found</div> }))
);

用作:

<React.Suspense fallback={'loading...'}><Recipe/></React.Suspense>

执行此操作并避免 linter 错误的更简洁方法是拥有可能组件的映射:

import Foo from 'docs/app/Recipes/Foo';
import Bar from 'docs/app/Recipes/Bar';
...

const componentsMap = { Foo, Bar };

...

const Recipe = componentsMap[props.componentName] || () => <div>Not found</div>;

在这种情况下 props.componentName如果需要，可以进行验证。