6

我一直在尝试模块化我的 React.js 应用程序（将作为桌面应用程序与 Electron 一起交付），如果我将来制作一个新模块，我可以添加一个新文件夹并修改一个几个文件，它应该可以很好地集成。我最初受到这篇文章的启发：https ://www.nylas.com/blog/react-plugins/

在那之后，我开始尽可能多地进行研究，并最终创建了一个 JSON 文件，该文件将存在于服务器中，其中包含为该特定客户端注册的插件清单。像这样的东西：

{
    "plugins": [
        {
            "name": "Test Plugin",
            "version": "0.0.1",
            "path": "testplugin",
            "file": "test",
            "component":"TestPlugin"
        },
        {
            "name": "Another Plugin",
            "version": "0.0.1",
            "path": "anothertest",
            "file": "othertest",
            "component":"TestPluginDeux"
        }
    ]
}

之后，我创建了几个与path值匹配的文件夹，其中包含与清单中的名称匹配的组件（例如testplugin/test.jsx，将组件导出TestPlugin为默认值）。我还制作了一个pluginStore文件来读取清单并将插件安装在this.state.

然后，在谷歌和这里做了大量的研究并找到了这个答案：React - Dynamically Import Components

使用该函数，我能够遍历清单，在目录中找到文件夹，并this.state通过运行我在主页中的方法中mountPlugins()创建的函数将插件安装在 中。pluginStorecomponentDidMount()

到现在为止还挺好。我正在使用 React-Router，我能够在 State 中动态安装插件，并能够通过像这样调用它们来将它们加载到我的 Home Route 中<TestPlugin />：

component我现在遇到的问题是，我想通过使用或方法动态地创建将从状态加载这些组件的路由render，但我没有运气。我总是会得到相同的结果......显然我传递的是一个对象而不是一个字符串。

这是我这次尝试的最后一次迭代：

{this.state.modules.registered.map((item) =>
<Route exact path={`/${item.path}`} render={function() {
  return <item.component />
  }}></Route>
)}

之后，我创建了一个调用PluginShell组件的路由，该组件由Navlink发送插件名称的组件调用以动态注入和加载它。

<Route exact path='/ex/:component' component={PluginShell}></Route>

但我最终遇到了同样的问题。我正在传递一个object并且createElement函数需要一个string.

我搜索了整个 StackOverflow，发现了许多类似的问题和答案。我尝试应用所有可能的解决方案，但没有成功。

编辑：我整理了一个 GitHub 存储库，其中包含最少的文件集来重现该问题。

这是链接： https ://codesandbox.io/embed/aged-moon-nrrjc

4

3 回答 3

5

好的。这里有很多活动部件可以大大简化。

  1. 我建议转向对开发人员更友好、更固执己见的状态存储（如Redux）。我个人从未使用过 Flux，所以我只能推荐我使用过的东西。因此，您可以避免使用普通类进行状态管理。
  2. 您应该只在初始应用程序加载期间导入一次模块，然后您可以调度一个操作将它们存储到（Redux）状态，然后根据需要与组件共享状态（仅当状态要与许多组件共享时才需要）分布在您的 DOM 树中，否则根本不需要）。
  3. 模块导入是异步的，因此不能立即加载。您必须设置一个条件以等待模块被加载，然后再将它们映射到 a Route（在您的情况下，您试图将模块的注册字符串名称映射到路由，而不是导入的模块函数）。
  4. 理想情况下，模块导入应该包含在状态内的已注册模块中。换句话说，当你导入模块时，它应该只是用一个组件函数覆盖模块组件字符串。这样，所有相关信息都放在一个对象中。
  5. 无需将模板文字与字符串连接混合和匹配。使用其中一种。
  6. 在覆盖之前使用setState 回调传播任何内容。previousState看起来更简单，更干净。
  7. 将您的 import 语句包装在一个try/catch块中，否则，如果该模块不存在，它可能会破坏您的应用程序。

工作示例（我只是在这个简单的示例中使用 React 状态，我也没有触及任何其他文件，这也可以简化）：

编辑 wispy-thunder-jtc6c

应用程序.js

import React from "react";
import Navigation from "./components/MainNavigation";
import Routes from "./routes";
import { plugins } from "./modules/manifest.json";
import "./assets/css/App.css";

class App extends React.Component {
  state = {
    importedModules: []
  };

  componentDidMount = () => {
    this.importPlugins();
  };

  importPlugins = () => {
    if (plugins) {
      try {
        const importedModules = [];
        const importPromises = plugins.map(plugin =>
          import(`./modules/${plugin.path}/${plugin.file}`).then(module => {
            importedModules.push({ ...plugin, Component: module.default });
          })
        );

        Promise.all(importPromises).then(() =>
          this.setState(prevState => ({
            ...prevState,
            importedModules
          }))
        );
      } catch (err) {
        console.error(err.toString());
      }
    }
  };

  render = () => (
    <div className="App">
      <Navigation />
      <Routes {...this.state} />
    </div>
  );
}

export default App;

路线/index.js

import React from "react";
import React from "react";
import isEmpty from "lodash/isEmpty";
import { Switch, Route } from "react-router-dom";
import ProjectForm from "../modules/core/forms/new-project-form";
import NewPostForm from "../modules/core/forms/new-post-form";
import ProjectLoop from "../modules/core/loops/project-loop";
import Home from "../home";

const Routes = ({ importedModules }) => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/projectlist/:filter" component={ProjectLoop} />
    <Route exact path="/newproject/:type/:id" component={ProjectForm} />
    <Route exact path="/newpost/:type" component={NewPostForm} />
    {!isEmpty(importedModules) &&
      importedModules.map(({ path, Component }) => (
        <Route key={path} exact path={`/${path}`} component={Component} />
      ))}
  </Switch>
);

export default Routes;
于 2019-08-18T01:12:52.590 回答
2

你的想法是对的，如果我猜你的语法有点不对劲的话。我不必从您的示例中进行太多调整即可获得动态路由工作。

这是我认为您想要做的一个工作示例：

const modules = [{
  path: '/',
  name: 'Home',
  component: Hello
},{
  path: '/yo',
  name: 'Yo',
  component: Yo
}];


function DynamicRoutes() {
    return (
        <BrowserRouter>
            { modules.map(item => <Route exact path={item.path} component={item.component}/>) }
        </BrowserRouter>
    );
}

https://stackblitz.com/edit/react-zrdmcq

于 2019-08-17T18:26:22.453 回答
1

我认为问题在于您尝试渲染的方式，<item.component />但不确定，您是否遇到了同样的错误？

尝试：

<Route exact path={`/${item.path}`} render={function() {
  return React.createElement(item.component, props)
  }}></Route>
)}
于 2019-08-17T18:20:20.427 回答