如何使用jquery ajax将ReactJs加载到其他页面中

Question

I am working on an existing application. 我正在研究现有的应用程序。 I wrote some of its views in React Js. 我在React Js中写了一些观点。 Now I would like to load these views in other page using jquery load. 现在我想使用jquery load在其他页面中加载这些视图。 Is that possible. 那可能吗。

[Assume leave.html contain react code. [假设leave.html包含反应代码。 Now I want to load leave.html inside index.html using jquery load. 现在我想使用jquery load在index.html中加载leave.html。 index.html has no react code. index.html没有反应代码。 How to do this] 这个怎么做]

Answer 1

I am not sure whether you can actually use load with react components.But why do you want to use jquery load instead you can use create an element say div with id = "leave" in your index.html and append your react component let webpack compiler take care of parsing it to index.html, code from leave.html can go as as react component in a jsx file such as: 我不知道你是否能实际使用负荷与你为什么要使用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;

Create a app.js for your application and append the above exported module into index.html 为您的应用程序创建一个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 will look like this : index.html将如下所示：

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

Use webpack to compile react and you will be able to have reusable components in your application. 使用webpack编译反应，您将能够在您的应用程序中拥有可重用的组件。

Thanks 谢谢

如何使用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