index.php

Question

我正在研究ReactJs项目，在这里我们没有使用任何API来管理数据。

在项目中，我们使用Webpack捆绑React APP。

现在的问题是，通过包含bundle.js，React APP应该可以在任何网站上使用，并且网站将允许提供一些输入数据，因此我们将加载ReactAPP。

因此，我正在寻找将数据发送到捆绑的ReactAPP的最佳方法，以便我们可以根据提供的数据编写逻辑来加载React。

注意：没有机会使用API调用，因为ReactAPP通过包含bundle.js独立于任何网站使用

在PHP网站中

index.php

<script type="text/javascript">
const configReactApp = {
   "selector": "loadmy_react_here", //should ID
   "config": {}
};
</script>

<!--- My React APP bundled js using Webpack --->
<script src="bundled.min.js"></script>

<body>
   <div class="container">
      <div class="left-panel"></div>
      <div class="right-panel">
        <div id="loadmy_react_here">
         <!-- Load my react app here --->
        </div>
      </div>
   </div>
</body>

在React中

ReactDOM.render(<DashboardComponent 
   myArgument = {configReactApp.config}
/>, document.getElementById(configReactApp.selector)

);

Answer 1

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

如何在捆绑的ReactJs中发送价值

index.php

在React中

1 个答案: