javascript - 在 React Router Routes 中动态注入数据
问题描述
我一直在尝试模块化我的 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()
创建的函数将插件安装在 中。pluginStore
componentDidMount()
到现在为止还挺好。我正在使用 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 存储库,其中包含最少的文件集来重现该问题。
解决方案
好的。这里有很多活动部件可以大大简化。
- 我建议转向对开发人员更友好、更固执己见的状态存储(如Redux)。我个人从未使用过 Flux,所以我只能推荐我使用过的东西。因此,您可以避免使用普通类进行状态管理。
- 您应该只在初始应用程序加载期间导入一次模块,然后您可以调度一个操作将它们存储到(Redux)状态,然后根据需要与组件共享状态(仅当状态要与许多组件共享时才需要)分布在您的 DOM 树中,否则根本不需要)。
- 模块导入是异步的,因此不能立即加载。您必须设置一个条件以等待模块被加载,然后再将它们映射到 a
Route
(在您的情况下,您试图将模块的注册字符串名称映射到路由,而不是导入的模块函数)。 - 理想情况下,模块导入应该包含在状态内的已注册模块中。换句话说,当你导入模块时,它应该只是用一个组件函数覆盖模块组件字符串。这样,所有相关信息都放在一个对象中。
- 无需将模板文字与字符串连接混合和匹配。使用其中一种。
- 在覆盖之前使用setState 回调传播任何内容。
previousState
看起来更简单,更干净。 - 将您的 import 语句包装在一个
try/catch
块中,否则,如果该模块不存在,它可能会破坏您的应用程序。
工作示例(我只是在这个简单的示例中使用 React 状态,我也没有触及任何其他文件,这也可以简化):
应用程序.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;
推荐阅读
- javascript - 如何将字符串格式的 json 数组转换为数组 []
- c# - 在c#中处理超过700k的大量json数据
- python - 无法在 C# 中从串行读取,但在 python 中工作
- typescript - 带有映射器对象的打字稿通用对象映射
- azure - Xamarin 使用 azure 形成推送通知
- java - 如何在 OpenSearchDescription xml 文件中定义关键字?
- javascript - 使用绝对路径在 d3.js 中加载 csv 文件
- json - 当响应有多个数组时如何修复 importJSON?
- javascript - npm-mysql 一夜之间崩溃
- ios - 我们可以远程控制连接到远程机器的 iPhone 以信任开发人员(用于配置文件)吗?