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

Question

I would like to use a React-App, and give it some arguments (props), depending on where I embed it.

So one step back, we are using React actually as a library, and not the entire page is in React. We have a very functioning website, and some parts are now being build in react. Our motivation is: If you want the same component in another page, you can simply copy-paste 3 lines which include the css and js files, put a <div id="myReactAppRoot"></div> , and that's it. Very quick, very clean, and instantly functioning.

My question

When I have another "copy" of the React app, I would like to give it a different starting state.

• One example use-case: I have two pages, in one I want the data to be grouped by X and in the other grouped by Y.
• Another use-case, which I will have on my next project: disable editng, depending on the users permission level (the permission level is known by the main page).

How can I achive this?

My current solution

My current solution is simply having a utils.js in the React app, which I use to access the windows object and get out the pieces I want:

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

Then importing utils in other components and using the functions/reading the values. And of course making those objects available on the main page.

But really, this feels wrong .

My ideal solution would look a lot like the Vue.js way:

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

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

Because I can just copy paste this bit, and change the Hello Vue! , and all the sudden the starting state is different in my "second copy" of it. Or even more cleverly, wrap it in a function that gets some initialState and put that JavaScript part in a file which I reference.

I have considered

I have considered editing the compiled JavaScript code that is being referenced. So far I only saw that the actual hooking into the myReactAppRoot -element is being done in the main.chunck.js , and editing that file seems too much like a hack (feels more wrong than my current solution).

Answer 1

To expand on Mike's comment, let's first translate your Vue app into 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
);

A function that mounts an instance of App on a DOM node with id domId would be something like

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