组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI
<!DOCTYPE html><html><head> <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script> <script src="js/jquery.js"></script></head><body><div id="example"></div><script type="text/babel"> 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,data:value }) ) },
render:function () { if(this.state.loading){ return <span>loading...</span> } else if(this.state.error !== null){ return <span>Error: {this.state.error.message}</span>; } else{ var repos = this.state.data.items; var repoList = repos.map(function (repo,index) { return ( <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li> ) }); return ( <main> <h1>Most Popular JavaScript Projects in Github</h1> <ol>{repoList}</ol> </main> ); } } });
ReactDOM.render( <RepoList promise={$.getJSON(‘https://api.github.com/search/repositories?q=javascript&sort=stars‘)}/>, document.getElementById("example") )
</script></body></html>
上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。
我们甚至可以把一个Promise对象传入组件
时间： 2024-11-03 01:40:22