如何使用React来加载外部JSON数据

Load WordPress Posts in React 本文示范了如何加载一个wordpress文章列表。可以通过调用restful api的方式，也可以是离线json文件。

react, restful

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 5758
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"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"));

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Nunito:300);
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: 300;
    padding: 2em;
    color: #666;
}
pre {
    overflow: scroll;
    padding: 1em .5em;
    background: #f4f4f4;
}
#main {
    max-width: 30em;
    margin: 0 auto;
    word-wrap: break-word;
}
h1 {
    font-size: 2em;
    margin: 0;
    font-family: Nunito, sans-serif;
    color: #2e3641;
}
a {
    color: #fc781f;
}
.post {
    font-size: 14px;
    font-weight: 300;
    border-bottom: 1px solid #ddd;
    padding: 2em 0;
}
.post-title {
    display: block;
    font-family: Nunito, sans-serif;
    margin: 0 0 10px 0;
    font-size: 1.5em;
    margin-bottom: 1em;
    color: #2e3641;
}
.post-title a {
    color: #2e3641;
    text-decoration: none;
}
.post-title a:hover {
    color: #fc781f;
}
.excerpt {
    margin: 1em 0;
}
.entry-meta {
    display: block;
    text-transform: uppercase;
    font-family: Nunito, sans-serif;
    margin: 2em 0 1em;
    overflow: hidden;
    line-height: 2;
}
.entry-meta .author-wrap {
    float: left;
    display: inline-block;
    padding: 0;
    text-decoration: none;
    color: #2e3641;
}
.entry-meta .author-wrap:hover {
    color: #fc781f;
}
.entry-meta .author-wrap span {
    display: inline-block;
    padding: .75em 0;
}
.entry-meta .author-wrap .avatar {
    float: left;
    border-radius: 50%;
    margin-right: .5em;
}
.entry-meta .read-more {
    float: right;
}
@media (max-width: 25em) {
    .entry-meta {
        font-size: .75em;
    }
    .entry-meta .avatar {
        width: 32px;
        height: 32px;
    }
}
a.button {
    display: inline-block;
    padding: .75em 1em;
    background: #fc781f;
    color: white;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Nunito, sans-serif;
    max-width: 300px;
    margin: 0 auto;
}
img {
    max-width: 100%;
}

HTML

Load WordPress Posts in React 本文示范了如何加载一个wordpress文章列表。可以通过调用restful api的方式，也可以是离线json文件。

react, restful

编辑器支持Emmet

快捷键

Load WordPress Posts in React 本文示范了如何加载一个wordpress文章列表。可以通过调用restful api的方式，也可以是离线json文件。

react, restful

学习如何用Three.js和React将三维空间中的SVG分离出来并把3D场景分解为可重用组件

使用ReactJS实现动态轮廓外形（shape-outside）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：