Node.js 如何动态加载多个React组件？

嗨，我想从一个目录动态加载多个react组件。这样某人只需在目录中添加一个组件就可以加载它。我的想法大致如下：

import * as dynamicComponents from './dynamicComponents';

const toAdd = [] dynamicComponents.forEach(function(component){  
toAdd.push( Route path={component.link} component={component.implmentation} /> })


render(<Provider store={store}>
    <Router history={history}>
      <Route path="/" component={Template}>
        <IndexRoute component={Main} />
        {toAdd}
      </Route>
    </Router>   
   </Provider>,  
  document.getElementById('root') );

import*作为“/dynamicComponents”中的dynamicComponents；
const toAdd=[]dynamicComponents.forEach（函数（组件）{
toAdd.push（路由路径={component.link}component={component.implementation}/>}）
渲染(
{toAdd}
,  
document.getElementById（'root'）；

---

这可能吗？

我相信您的第一个导入语句在Babel中不起作用。请尝试以下软件包：

npm i --save-dev babel-plugin-wildcard

使用以下内容将其添加到您的.lrc：

{
    "plugins": ["wildcard"]
}

您可能没有在您的环境中使用Babel，但实际上您需要解决从通配符或动态路径加载的问题。这可能是最困难的部分

您还需要确保放入目录的每个文件都会导出一个React组件类作为其默认导出，并具有一个返回链接的静态函数

const SomeReactComponent = () => (<p>Rendering something.</p>);

//Export link as static member of the class.
SomeReactComponent.link = '/some/react/component/routing/link';

export default SomeReactComponent;

constsomereactcomponent=（）=>（呈现某物。
）；
//将链接导出为类的静态成员。
SomeReactComponent.link='/some/react/component/routing/link'；
导出默认组件；

然后，类似以下的代码将在编译时工作：

import * as dynamicComponents from './dynamicComponents';

const toAdd = dynamicComponents.map( (ComponentClass) => <Route path={ComponentClass.link} component={ComponentClass} /> );

import*作为“/dynamicComponents”中的dynamicComponents；
常量toAdd=dynamicComponents.map（（ComponentClass）=>）；

---

这是一个编译时解决方案。如果您想要运行时解决方案，请使用ES6导入以外的导入程序进行调查，我认为这无法在运行时动态使用。

我认为您的第一个导入语句在Babel中不起作用。请尝试此软件包：

npm i --save-dev babel-plugin-wildcard

使用以下内容将其添加到您的.lrc：

{
    "plugins": ["wildcard"]
}

您可能没有在您的环境中使用Babel，但实际上您需要解决从通配符或动态路径加载的问题。这可能是最困难的部分

您还需要确保放入目录的每个文件都会导出一个React组件类作为其默认导出，并具有一个返回链接的静态函数

const SomeReactComponent = () => (<p>Rendering something.</p>);

//Export link as static member of the class.
SomeReactComponent.link = '/some/react/component/routing/link';

export default SomeReactComponent;

constsomereactcomponent=（）=>（呈现某物。
）；
//将链接导出为类的静态成员。
SomeReactComponent.link='/some/react/component/routing/link'；
导出默认组件；

然后，类似以下的代码将在编译时工作：

import * as dynamicComponents from './dynamicComponents';

const toAdd = dynamicComponents.map( (ComponentClass) => <Route path={ComponentClass.link} component={ComponentClass} /> );

import*作为“/dynamicComponents”中的dynamicComponents；
常量toAdd=dynamicComponents.map（（ComponentClass）=>）；

---

这是一个编译时解决方案。如果您想要运行时解决方案，请使用ES6导入以外的导入程序进行调查，我认为在运行时无法动态使用这些导入程序。

非常感谢，这正是我开始使用时需要的。我刚刚根据您的指导尝试了一个实现，我正在获得我想要的属性！T非常感谢你，这正是我需要开始的。我刚刚根据你的指导尝试了一个实现，我得到了我想要的属性！