Saya sedang mengerjakan proyek ReactJs di mana kami tidak menggunakan API apa pun untuk mengelola data.

Dalam proyek kami menggunakan Webpack untuk menggabungkan React APP.

Sekarang masalahnya adalah React APP harus dapat digunakan di situs web mana pun dengan memasukkan bundle.js dan situs web akan memungkinkan untuk memberikan beberapa data input dan karenanya kami akan memuat ReactAPP.

Jadi, saya menemukan cara terbaik untuk mengirim data ke dalam paket ReactAPP sehingga kami dapat menulis logika kami untuk memuat React berdasarkan Data yang disediakan.

Catatan: Tidak ada kesempatan untuk menggunakan panggilan API karena ReactAPP independen untuk digunakan di situs web mana pun dengan menyertakan bundle.js

Di Situs Web 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>

Dalam Bereaksi

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

);
2
Ankur 19 September 2019, 17:53

1 menjawab

Jawaban Terbaik

Dalam file 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));
    },
};

Sekarang muat Aplikasi ReactJs tempat Anda ingin memuat.

<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>
2
Krupal Patel 19 September 2019, 15:05