第九节，ajax异步处理，需要引用jquery

最新推荐文章于 2021-08-06 11:13:34 发布

daily886

最新推荐文章于 2021-08-06 11:13:34 发布

阅读量273

点赞数

分类专栏： React Native js笔记文章标签： javascript

本文链接：https://blog.csdn.net/daily886/article/details/70842547

版权

React Native js笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>

<script src="./js/browser.min.js"></script>

<script src="./js/jquery.min.js"></script>
</head>
<body>
<div id="ex1"></div>
<script type="text/babel">
let Ajax = React.createClass({
//ceateClass创建的类，首字母必须大写例如 HelloMessage
//let是ECMA6的声明变量，用它所声明的变量，只在let命令所在的代码块内有效。
getInitialState(){
//getInitialState 是系统固定方法，不能变更
//用于设置 this.state 内的初始属性
return {
username : '',
lastGistUrl : '',
};
},
componentDidMount(){
//componentDidMount 是系统固定方法，不能变更
//用于已插入真实 DOM之后的操作

$.get(this.props.source,function(result){
//ajax语法 $.get(URL,data,function(data,status,xhr),dataType); // data和datatype可选

var lastGist = result[0];
//获取ajax返回数据并赋值给lastGist

if(this.isMounted()){
//如果组件渲染到了 DOM 中，isMounted() 返回 true。可以使用该方法保证 setState() 和 forceUpdate() 在ajax异步场景下的调用不会出错。
this.setState({
username : lastGist.owner.login,
lastGistUrl : lastGist.html_url,
});
}
}.bind(this));
//回调函数一定要加.bind(this)方法,绑定到dom对象中
},
render(){
return (
<div>
{this.state.username},s last gist is <a href={this.state.lastGistUrl} target={this.props.target}>here</a>.
</div>
);
}
});
ReactDOM.render(
<Ajax source="https://api.github.com/users/octocat/gists" target="_blank" />,
document.getElementById('ex1')
);
</script>
</body>
</html>

daily886

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第九节，ajax异步处理，需要引用jquery

Document<!-- 原本的 react package 被拆分为 react 及 react-dom 两个 package。其中 react package 中包含 React.createElement、 .createClass、 .Component， .PropTypes， .Children 这些 API，而 react-dom package 中包含 ReactDOM
复制链接

扫一扫

专栏目录