React AJAX

最新推荐文章于 2024-07-16 20:32:10 发布

Rltas

最新推荐文章于 2024-07-16 20:32:10 发布

阅读量362

点赞数

文章标签： ajax react

本文链接：https://blog.csdn.net/Rltas/article/details/73229051

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ReactAJAX</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/babel.js"></script>
    <script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
    <div id="Rltas"></div>
    <script type="text/jsx">
        var Ajax = React.createClass({
            getInitialState : function(){
                return{
                    list : []
                }
            },
            componentDidMount : function(){
                $.get("addresses.json",function(response){
                    console.log(response);
                    this.setState({
                        list : response.regions
                    })
                }.bind(this))
            },
            render(){
                var user = this.state.list.map(function(element,index){
                    return <User user = {element} key = {index}/>
                })
                return(
                        <div>
                            {user}
                            </div>
                )

            }
        });
        class User extends React.Component{
           render(){
               var {user} = this.props;
               return(
                       <li style={{listStyle:"none"}}>
                           <p>{user.id}</p>
                           <p>{user.name}</p>
                       </li>
               )
           }

        }
        ReactDOM.render(
                <Ajax/>,
                document.getElementById("Rltas")
        )
    </script>
</body>
</html>

Rltas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React AJAX

html lang="en">head> meta charset="UTF-8"> title>ReactAJAXtitle> script src="js/react.js">script> script src="js/react-dom.js">script> script src="js/babel.js">script> script
复制链接

扫一扫