首页 > 代码库 > 十一.Ajax

十一.Ajax

2024-08-14 11:59:14   218人阅读

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

<!DOCTYPE html>
<html>
<head>
    <script src=http://www.mamicode.com/"js/react.js"></script>
    <script src=http://www.mamicode.com/"js/react-dom.js"></script>
    <script src=http://www.mamicode.com/"js/browser.min.js"></script>
    <script src=http://www.mamicode.com/"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 =http://www.mamicode.com/> 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=http://www.mamicode.com/{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对象传入组件

十一.Ajax


联系
我们