Herring Cove
react入门 （4）-ajax请求

  04 Jan 2016

ajax请求

组件的数据来源，通常是通过ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 ajax 请求，等请求成功，再用 this.setState 方法重新渲染UI。

 var GustList=React.createClass({
            getInitialState:function () {
                return {name:"",lastGistUrl:""};
            },
            componentDidMount:function () {
                $.get(this.props.source,function (data) {
                    var Gistlist=data[0];
                    if(this.isMounted){
                        this.setState({
                            name:Gistlist.owner.login,
                            lastGistUrl:Gistlist.html_url
                        })
                    }

                }.bind(this))
            },
            render:function () {
                return(
                        <div>
                            {this.state.name} 最后的发言在这
                            {this.state.lastGistUrl}
                        </div>

                )
            }
        })
        ReactDOM.render(
                <GustList source="https://api.github.com/users/octocat/gists" />,
            document.getElementById('example')
        );

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