Question

我想知道是否可以将参数传递给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为＆＃34; content＆＃34;：

的div

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

我知道我可以做类似

的事情

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

但是如何将此值作为属性传递给反应组件AnotherComponent？

Answer 1

怎么样？

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

然后

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

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

);

Answer 2

在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 App。

<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>

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

2 个答案: