React 组件的数据可以通过Ajax请求从服务器端获取，在componentDidMount方法中的设置Ajax请求。
从服务端获取数据库可以将数据存储在state中，再用 this.setState 方法重新渲染 UI， 需要注意的是，要使用isMounted()判断组件是否处于挂载
状态下，只有这样，使用setState才可以更新视图。
当使用Ajax加载数据时，在组件卸载前使用 componentWillUnmount 来取消未Ajax请求。
下面的例子使用jQuery的Ajax的get具体实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React中的ajax</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script type="text/javascript" src="js/browser.min.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
</head>
<body>
<div id="ajax"></div>
<script type="text/babel">
var UserInfro = React.createClass({
getInitialState: function() {
return {
username: '',
userpwd: ''
};
},
componentDidMount: function() {
this.ajaxRequest = $.get(this.props.source, function (result){
if(this.isMounted()){
this.setState({
username: result.split(" ")[0],
userpwd: result.split(" ")[1]
})};
}.bind(this))
;
},
componentWillUnmount: function() {
this.ajaxRequest.abort();
},
render: function() {
return (
<div>
用户名为: {this.state.username} <br/>
用户密码为： {this.state.userpwd}
</div>
);
}
});
ReactDOM.render(
<UserInfro source="user.txt" />,
document.getElementById('ajax')
);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
