将值传递给捆绑的 React JS 文件？

IT技术 javascript reactjs webpack
2021-05-15 08:11:00

我想知道是否可以将参数传递给 react 入口点。

我的入口点是这样的：

module.exports = {
    entry: "./js/components/Application.js",
    output: {
        path: "./dist",
        filename: "bundle.js"
    },
    // ...
}

我的 Application.js：

import React from 'react';
import ReactDOM from 'react-dom';
import AnotherComponent from './AnotherComponent';

ReactDOM.render(<AnotherComponent />, document.getElementById('content'));

不是我将我的应用程序与 webpack 捆绑在一起，并将此捆绑包包含在另一个应用程序中。此应用程序提供了一个 ID 为“content”的 div：

<body>
    <div id="content"></div>
    <script src="bundle.js" />
</body>

我知道我可以做类似的事情 

<script src="bundle.js" myargument="somevalue" />

但是我怎样才能得到这个值以将它AnotherComponent作为属性传递给react组件？

2个回答

关于什么

<script id="bundle" src="bundle.js" myargument="somevalue" />

接着

const myScript = document.getElementById('bundle');

ReactDOM.render(<AnotherComponent 
   myArgument = {myScript.getAttribute('myargument')}
/>, document.getElementById('content')

);

在 ReactJS 文件 src/index.js 中

import React from 'react';
import ReactDOM from 'react-dom';

window.MyReactApp = {
    init: (selector, myData) => {
        selector = selector.substring(1);
        const renderComponent = (<homeComponent mydata={myData} />);
        ReactDOM.render(renderComponent, document.getElementById(selector));
    },
};

现在加载您要加载的 ReactJs 应用程序。

<script type="text/javascript" src="bundle.min.js"></script>
<div id="load-myreactapp"></div>

<script type="text/javascript">
    const myData = {};
    MyReactApp.init('#load-myreactapp', myData);
</script>
其它你可能感兴趣的问题
上一篇印刷品上的漂移和口吃 下一篇我的 3D 打印机热端总是卡住