javascript - 入口点组件（webpack）的参数(Parameters for entrypoint component (webpack))

Question

my webpack config uses the main.jsx as entry component.(我的webpack配置使用main.jsx作为入口组件。)

This does all work as such and I call it like this:(这样就可以完成所有工作，我这样称呼它：) <script src="./myApp.js"></script> <script> new myApp({ targetElem: document.querySelector('#order-form'), productData: ['test1', 'test2', 'test3'] }); </script> What I want to achieve is, to use parameters that I provide, namely targetElem and productData(我要实现的是使用我提供的参数，即targetElem和productData) The main.jsx looks like that and works perfectly:(main.jsx看起来像这样，并且运行良好：) import React from 'react'; import { render } from 'react-dom'; import { HashRouter as Router, Route, Switch } from 'react-router-dom'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; import { persistStore } from 'redux-persist'; import { PersistGate } from 'redux-persist/integration/react'; import store from '../store'; import i18n from '../i18n'; import Start from './pages/start'; render( <Provider store={store}> <PersistGate loading={null} persistor={persistSt ore(store)}> <I18nextProvider i18n={i18n}> <Router> <Switch> <Route exact path="/" component={Start} /> </Switch> </Router> </I18nextProvider> </PersistGate> </Provider>, // Contextprovider does not work at the moment as they have an error there document.querySelector('#order-form') ); If I change it to this, to use the parameters:(如果将其更改为此，请使用参数：) import React from 'react'; import { render } from 'react-dom'; import { HashRouter as Router, Route, Switch } from 'react-router-dom'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; import { persistStore } from 'redux-persist'; import { PersistGate } from 'redux-persist/integration/react'; import store from '../store'; import i18n from '../i18n'; import Start from './pages/start'; export default ({ productData, targetElem }) => { console.log(productData); render( <Provider store={store}> <PersistGate loading={null} persistor={persistStore(store)}> <I18nextProvider i18n={i18n}> <Router> <Switch> <Route exact path="/" component={Start} /> </Switch> </Router> </I18nextProvider> </PersistGate> </Provider>, // Contextprovider does not work at the moment as they have an error there targetElem ); }; The page stays white (and no errors in the console).(页面保持白色（控制台中没有错误）。) I have seen that it is definitely somehow possible.(我已经看到，这绝对是有可能的。) How to do it ?(怎么做 ？)   ask by Gutelaunetyp translate from so

Answer 1

What you seem to be wanting to pass as parameters is:(您似乎想要作为参数传递的内容是：)

1) A static DOM element(1）静态DOM元素)
2) Server data(2）服务器数据) 1) It is usual for the DOM element to just be added in the myApp.js .(1）通常将DOM元素添加到myApp.js 。) This is just DOM crawling, there is no actual benefit if you put it in one script or the other.(这只是DOM爬网，如果将其放在一个或另一个脚本中并没有任何实际好处。) 2) Making a basic call after initial render in React can be performed from the React component itself:(2）在React中进行初始渲染后，可以从React组件本身执行基本调用：) componentDidMount if you're using regular class components(componentDidMount如果你使用普通类组件) useEffect(() => { // here }, []); if you're using functional components with hooks(如果您使用带有挂钩的功能组件) Of course you can also dispatch an action if you use Redux or useDispatch .(当然，如果您使用Redux或useDispatch也可以调度动作。) Just to say that you don't need to pass these variables from the global scope.(只是说您不需要从全局范围传递这些变量。) You can use local state in your React component as well obviously with the useState hook.(您显然也可以通过useState挂钩在React组件中使用本地状态。) Edit to your comment:(编辑您的评论：) In that case you could have another React component that handles the user input, and pass it to the component, for example using Redux.(在这种情况下，您可能会有另一个React组件来处理用户输入，并将其传递给该组件，例如使用Redux。) Obviously you can always pass data via the DOM using data-attributes for example like it was done in the old days, but this is not so common anymore.(显然，您总是可以像过去那样使用数据属性通过DOM传递数据，但是这种情况已经不那么普遍了。)
I used pregenerated json before and the way I handled this, was by using SSR and using Redux to hydrate the state in the store automatically:(我之前使用了预生成的json以及处理此问题的方式是通过使用SSR并使用Redux自动将商店中的状态合并：) https://redux.js.org/recipes/server-rendering#inject-initial-component-html-and-state(https://redux.js.org/recipes/server-rendering#inject-initial-component-html-and-state) Anyhow, you can just fetch preloaded state from the window object.(无论如何，您可以从window对象获取预加载状态。)