我可以将 arguments 提供给 react-app 吗？ （React 的依赖注入）

Question

我想使用一个 React-App，并给它一些 arguments（道具），这取决于我嵌入它的位置。

所以退一步说，我们实际上将 React 用作一个库，而不是整个页面都在 React 中。 我们有一个功能非常强大的网站，现在正在构建一些部分。 我们的动机是：如果你想在另一个页面中使用相同的组件，你可以简单地复制粘贴包括css和js文件的 3 行，放一个<div id="myReactAppRoot"></div> ，就是这样。 非常快速，非常干净，并且可以立即运行。

我的问题

当我有 React 应用程序的另一个“副本”时，我想给它一个不同的起始 state。

• 一个示例用例：我有两个页面，在一个页面中，我希望数据按 X 分组，在另一个页面中按 Y 分组。
• 另一个用例，我将在我的下一个项目中使用：禁用编辑，具体取决于用户的权限级别（权限级别由主页知道）。

我怎样才能做到这一点？

我目前的解决方案

我当前的解决方案只是在 React 应用程序中添加一个utils.js ，我用它来访问windows object 并取出我想要的部分：

const utils = {
    fun1: window.myProject.forReact,fun1,
    groupElements: window.myProject.forReact.groupElements,
    permissionLevel: window.myProject.forReact.permissionLevel
};
export default utils;

然后在其他组件中导入utils并使用函数/读取值。 当然，让这些对象在主页上可用。

但说真的，这感觉不对。

我理想的解决方案看起来很像 Vue.js 方式：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

因为我可以只复制粘贴这一点，然后更改Hello Vue! ，并且突然之间开始的 state 在我的“第二个副本”中有所不同。 或者更巧妙的是，将它包装在一个获得一些初始状态的initialState中，并将 JavaScript 部分放入我引用的文件中。

我考虑过

我已经考虑编辑正在引用的编译 JavaScript 代码。 到目前为止，我只看到 myReactAppRoot 元素的实际挂钩是在myReactAppRoot中main.chunck.js的，并且编辑该文件似乎太像 hack（感觉比我当前的解决方案更错误）。

Answer 1

为了扩展 Mike 的评论，让我们首先将您的 Vue 应用程序翻译成 React：

//html
<div id="root"></div>

//JS
const App = ({message}) => <div>{message}</div>
const rootElement = document.getElementById("root");
ReactDOM.render(
  <App message={"Hello, React!"}/>
  rootElement
);

一个 function 将App实例安装在 DOM 节点上，id domId类似于

function mountAppWithMessageOnNode(message, domId){
  const rootElement = document.getElementById(domId);
  ReactDOM.render(
    <App message={message}/>
    rootElement
  );
}