<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class UserGist extends React.Component {
constructor(props) {
super(props);
this.state = { title: "", content: "" };
}
componentDidMount() {
this.serverRequest = $.get(
this.props.source,
function (result) {
var lastGist = result.data;
console.log(lastGist);
this.setState({
title: lastGist.title,
content: lastGist.content,
});
}.bind(this)
);
}
componentWillUnmount() {
this.serverRequest.abort();
}
render() {
return (
<div>
{this.state.title} 用户最新的 Gist 共享地址:
<a href={this.state.content}>{this.state.content}</a>
</div>
);
}
}
ReactDOM.render(
<UserGist source="1.json" />,
document.getElementById("example")
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class UserGist extends React.Component {
constructor(props) {
super(props);
//在state设置两个属性,以便后续通过state对象来对其进行修改
this.state = { username: "", lastGistUrl: "" };
//绑定挂载事件
this.componentDidMount = this.componentDidMount.bind(this);
}
componentDidMount() {
//接下来操作state时上下文对象发生改变,此处拿到操作句柄
var that = this;
//ajax请求
this.serverRequest = $.ajax({
url: this.props.source,
type: "GET",
dataType: "jsonp",
success: function (result) {
console.log(result.data);
var lastGist = result.data;
//此处的上下文发生改变,this的指针指向发生了变化,通过上述定义的that来操作
that.setState({
title: lastGist.title,
content: lastGist.content,
});
},
});
}
//卸载React组件时,把多余请求关闭,以免影响其他框架或组件的操作
componentWillUnmount() {
this.serverRequest.abort();
}
render() {
return (
<div>
{this.state.title} 用户最新的 Gist 共享地址:
<a href={this.state.content} rel="nofollow">
{this.state.content}
</a>
</div>
);
}
}
ReactDOM.render(
<UserGist source="https://gitee.com/feature_notifications" />,
document.getElementById("example")
);
</script>
</body>
</html>