How to load page contain ReactJs into other page using jquery ajax
Question
I am working on an existing application. I wrote some of its views in React Js. Now I would like to load these views in other page using jquery load. Is that possible.
[Assume leave.html contain react code. Now I want to load leave.html inside index.html using jquery load. index.html has no react code. How to do this]
1 answers
solution1
0 2017-03-06 05:55:04
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:
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
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 :
<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.
Thanks
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.