reactjs - 通过变量动态导入文件 - React Native

Question

我有一个包含组件路径的 path.json 文件

// path.json

{
  "main": "./login/index.js",
  "paths": [
    {
      "name": "login",
      "path": "./login/index.js",
      "image": ""
    }
  ]
}

我想在 native react 中动态加载'./login/index.js'文件并渲染此特定文件

我当前的实现

const MyComponent = createLazyContainer(() => {
  const componentPath = PathJson.main; // ./login/index.js
  return import(`${componentPath}`); //import error here @ line 7
});

export default MyComponent;

我收到以下错误:

Invalid call at line 7: import("" + componentPath)

Answer 1

人们在线程中告诉您的内容是正确的，但我想添加一种可能的解决方案。所有导入/需求都在编译时解决，而不是在您尝试执行的运行时解决。当您运行应用程序时，如果您尚未导入这些文件，则无法使用它们。

有一个解决方法，假设您提前知道所有可能的文件，这就是做类似工厂的事情:

const possiblePaths = {
    'one': require('path/to/file/1'),
    'two': require('path/to/file/2')
}
    
function(type){
    return possiblePaths[type];
}

然后你以某种方式使用它:

render(){
    const MyComponent = function('one');

    return <MyComponent/>;
}

这或多或少是伪代码，我不能立即工作，但希望你能明白。您需要存储对可能需要的每个导入的引用，然后不要使用导入，而是使用在编译时为您创建的引用。