Я довольно новичок в React и столкнулся с проблемой, с которой мне определенно нужна помощь.В целом, моя цель - создать приложение React, которое может «вставлять» или «вставлять» (как вы хотите это называть) в другие приложения реакции.Например, представьте свой смартфон.У вас есть основное приложение (ОС), которое имеет меньшие приложения, которые оно может загружать, когда пользователь нажимает на них.
Я не хочу «жестко» кодировать компоненты в основное приложение реакции,приложение должно иметь возможность отображать любой компонент, возвращаемый сервером, поэтому компонент не может быть в коде.
В идеальном мире я хотел бы иметь возможность загружать приложения из другого источника (например, S3)Но, для примера, вот пример того, как все они находятся на одном жестком диске.
/express-server
/node-modules
/react-modules
/module-1
index.js
component1.js
/module-2
index.js
component.js
app.js
----
/react-app
app.js
Где реакция app.js выглядит примерно так (опять же, я новичок в реакции, так что это простовысокий уровень того, что я хочу сделать)
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
app_modules: {}
render_app_modules: []
};
}
componentWillMount() {
// Get list of module locations from express server
// For each module, load them up in memory giving each one an id
modules.forEach((module) => {
app_modules[module.name] = import(module);
});
}
loadModule(event) {
// If the app icon was clicked on, add it to the render list
render_app_modules.push(event.module);
}
render() {
<div class="ModuleList">
// for each module in app_modules, show it's icon
</div>
<div class="RenderedModules">
// For each component in render_app_module, load it here
</div>
}
}