本文展示了如何在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) {
return React.createElement(
"div", {
key: post.link,
className: "post"
},
React.createElement(
"h2", {
className: "post-title"
},
React.createElement("a", {
href: post.link,
dangerouslySetInnerHTML: {
__html: post.title.rendered
}
})
),
post.featured_media ? React.createElement(
"a", {
href: post.link
},
React.createElement("img", {
src: post._embedded['wp:featuredmedia'][0].media_details.sizes["large"].source_url
})
) : null,
post.excerpt.rendered ? React.createElement("div", {
className: "excerpt",
dangerouslySetInnerHTML: {
__html: post.excerpt.rendered
}
}) : null,
React.createElement(
"div", {
className: "entry-meta"
},
React.createElement(
"a", {
className: "author-wrap",
href: post._embedded.author[0].link
},
React.createElement("img", {
className: "avatar",
src: post._embedded.author[0].avatar_urls['48']
}),
"by ",
post._embedded.author[0].name
),
React.createElement(
"a", {
className: "button read-more",
href: post.link
},
"Read More »"
)
)
);
})
);
}
});
React.render(React.createElement(App, {
source: "/uploads/161101/wp.json"
}), document.querySelector("#app"));
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
