本文展示了如何在React应用中加载并渲染从外部JSON文件获取的数据。通过使用axios库，在组件挂载时发起请求，获取JSON数据，并将其更新到组件状态。当组件卸载时，请求会被取消。每个JSON数据项被映射为一个单独的显示组件，包含标题、特色媒体（如果存在）、摘录（如果提供）以及作者和阅读更多链接。
JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
"use strict";
var App = React.createClass({
displayName: "App",
getInitialState: function getInitialState() {
return {
posts: []
};
},
componentDidMount: function componentDidMount() {
var th = this;
this.serverRequest = axios.get(this.props.source).then(function(result) {
th.setState({
posts: result.data
});
});
},
componentWillUnmount: function componentWillUnmount() {
this.serverRequest.abort();
},
render: function render() {
return React.createElement(
"div", {
className: "post-wrapper"
},
this.state.posts.map(function(post) {
最低0.47元/天 解锁文章
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
