欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
React 入门实例教程
2017-10-25 17:20:34   来源:网络 阮一峰   评论:0 点击:
{this.state.username}'s last gist is here.
); } }); ReactDOM.render( https://api.github.com/users/octocat/gists" />, document.body );

  上面代码使用 jQuery 完成 Ajax 请求,这是为了便于说明。React 本身没有任何依赖,完全可以不用jQuery,而使用其他库。

  我们甚至可以把一个Promise对象传入组件,请看Demo12


ReactDOM.render(
  https://api.github.com/search/repositories?q=javascript&sort=stars')}
  />,
  document.body
);

  上面代码从Github的API抓取数据,然后将Promise对象作为属性,传给RepoList组件。

  如果Promise对象正在抓取数据(pending状态),组件显示"正在加载";如果Promise对象报错(rejected状态),组件显示报错信息;如果Promise对象抓取数据成功(fulfilled状态),组件显示获取的数据。


var RepoList = React.createClass({
  getInitialState: function() {
    return { loading: true, error: null, data: null};
  },

  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  },

  render: function() {
    if (this.state.loading) {
      return Loading...;
    }
    else if (this.state.error !== null) {
      return Error: {this.state.error.message};
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo) {
        return (
          
  • {repo.name} ({repo.stargazers_count} stars)
    {repo.description}
  • ); }); return (

    Most Popular JavaScript Projects in Github

      {repoList}
    ); } } });
    </script>

    相关热词搜索:实例 教程

    上一篇:JavaScript原型详解
    下一篇:学JavaScript是什么样的体验?

    收藏