如何使用jquery ajax将页面容器ReactJ加载到其他页面
如何使用jquery ajax将页面容器ReactJ加载到其他页面
提问于 2017-03-06 04:34:14
我正在处理一个现有的应用程序。我在React Js中写了一些它的视图。现在，我想使用jquery load将这些视图加载到其他页面中。有没有可能。
假设leave.html包含react代码。现在，我想使用jquery load在index.html中加载leave.html。index.html没有react代码。如何完成此操作
回答 1
Stack Overflow用户
发布于 2017-03-06 05:55:05
我不确定你是否真的可以在react components.But中使用load为什么你想使用jquery load而不是你可以在你的index.html中创建一个元素比如div和id = "leave"并附加你的react组件让webpack编译器负责将它解析成index.html，来自leave.html的代码可以作为jsx文件中的react组件，比如：
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编译react，您将能够在您的应用程序中拥有可重用的组件。
谢谢
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42617596
复制相关文章
相似问题
腾讯云开发者
