如何使用jquery ajax將ReactJs加載到其他頁面中

Question

我正在研究現有的應用程序。 我在React Js中寫了一些觀點。 現在我想使用jquery load在其他頁面中加載這些視圖。 那可能嗎。

[假設leave.html包含反應代碼。 現在我想使用jquery load在index.html中加載leave.html。 index.html沒有反應代碼。 這個怎么做]

Answer 1

我不知道你是否能實際使用負荷與你為什么要使用jQuery的負載，而不是您可以使用創建一個元素反應components.But說div與id = "leave"在您的index.html和追加的反應組件讓的WebPack編譯器負責將其解析為index.html，來自leave.html的代碼可以像jsx文件中的反應組件一樣，例如：

  import React from 'react';
  class Leave extends React.Component {
  constructor(props){
    super(props);//if you have properties
    this.state = {};
    this.myFunc= this.myFunc.bind(this); // bind your methods like this.
  }
  myFunc(){

}
render(){
    return (
        <div>
            <!-- Html content to be added over here. -->
             {this.myFunc()}
        </div>
    );
}
}
export default Leave;

為您的應用程序創建一個app.js，並將上面導出的模塊附加到index.html

import React from 'react';
import ReactDOM from 'react-dom';
import Leave from './jsx/Leave.jsx'; //import your module from jsx path.
ReactDOM.render(<Leave/>, document.getElementById('leave')); //append the compile data to index.html.

index.html將如下所示：

<html>
  <body>
   <div id="app"></div>
   <script src = "/build/index.js"></script>
   <!--index.js is build by webpack-->
  </body>
</html>

使用webpack編譯反應，您將能夠在您的應用程序中擁有可重用的組件。

謝謝

如何使用jquery ajax將ReactJs加載到其他頁面中

問題描述

1 個解決方案

解決方案1
0 2017-03-06 05:55:04

如何使用jquery ajax將ReactJs加載到其他頁面中

問題描述

1 個解決方案

解決方案1 0 2017-03-06 05:55:04

解決方案1
0 2017-03-06 05:55:04