[英]How to load page contain ReactJs into other page using jquery ajax
我正在研究现有的应用程序。 我在React Js中写了一些观点。 现在我想使用jquery load在其他页面中加载这些视图。 那可能吗。
[假设leave.html包含反应代码。 现在我想使用jquery load在index.html中加载leave.html。 index.html没有反应代码。 这个怎么做]
我不知道你是否能实际使用负荷与你为什么要使用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编译反应,您将能够在您的应用程序中拥有可重用的组件。
谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.