如何在 Reactjs 中有条件地导入文件

Question

我有一个大型应用程序，用于监视名为 routes.js 的文件。我根本无法更改文件名或弄乱 routes.js。当满足条件时，我需要根据来自另一个组件的 useState 变量加载另一个文件。以下代码需要放在 Apps.js 示例中：

if (!change) {
import routes from "routes";
} else {
import routes from "newroutes"
}

这可能吗？

Answer 1

可以使用 Webpack lazy loading（如果您使用 Webpack 构建您的应用程序）：

import(/* webpackChunkName: "routes" */ './routes').then(module => {
     const routes = module.default;
});

但您可能需要调整构建配置。此导入还返回一个承诺，因此您应该在回调中编写代码。

Update: 但在你的情况下，你似乎不需要它。你可以这样做：

import file1 from 'routes'
import file2 from 'newroutes'

let routes = file1
if (change) {
  routes = file2
}

因此您的 routes 变量将保持不变

Answer 2

您可以别名导入。

import routes_1 from "routes";
import routes_2 from "newroutes"

然后，您只需声明一个变量：routes并为其分配适当的值。

routes = !change ? routes_1 : routes_2;

How to conditionally import file in Reactjs