React - ES6 - Ajax获取接口数据渲染到UI组件【完整示例】

大 | 中 | 小
[不指定 2016/09/24 01:22 | by 刘新修 ]

本站PHP后端接口:  http://code.liuxinxiu.com/php/Interface/Jsoncallback.php?GUID=1&&Jsoncallback=1

本实例用 ES5 + JSX 语法编写[对应实例] : http://liuxinxiu.com/React_Ajax_setState_Render_UI_ES5/

JavaScript代码
  1. /****** ES6输入文件[调用模块依赖] ******/  
  2. import React, { Component, PropTypes } from 'react'  
  3. import $ from 'n-zepto'  
  4.   
  5. /****** ES5输入文件[调用模块依赖] ******/  
  6. //var React=require('react');  
  7. //var $=require('n-zepto');  
  8.   
  9. //import * as from './commentList.js'  
  10. //import list from './commentList.js';  
  11.   
  12.   
  13. /****** 本地模拟Array数据******/  
  14. var movies = [  
  15.     {  
  16.         id: 1,  
  17.         name: '速度与激情001',  
  18.         date: 2011  
  19.     },  
  20.     {  
  21.         id: 2,  
  22.         name: '速度与激情002',  
  23.         date: 2009  
  24.     }  
  25. ];  
  26.   
  27. /****** 外部子组件map数组当做模板之用 ES5 + JSX 语法编写 ******/  
  28. var MoviesList = React.createClass({  
  29.     render: function () {  
  30.         // this.props 用于从组件外部传入数据  
  31.         var _movies = this.props._movies;  
  32.         return (  
  33.             <li className="datali">  
  34.         {_movies.id}-{_movies.name}  
  35.             </li>  
  36.         )  
  37.     }  
  38. });  
  39.   
  40. /****** 外部子组件map数组当做模板之用 ES6 + JSX 语法编写 ******/  
  41. let CommentList=class CommentList extends Component {  
  42.     constructor(props) {  
  43.         super(props);  //ES6调用父类构造函数super不能少！  
  44.         this.state = {  
  45.              wording: '你好呀, '  
  46.         };  
  47.     }  
  48.   
  49.     /****** Ajax子组件中[主体模板] ******/  
  50.     render(){  
  51.         return <ul>{this.props.comments.map(this.renderComment)}</ul>;  
  52.     }  
  53.   
  54.     /****** Ajax子组件中[嵌套模板] ******/  
  55.     renderComment({plat,type,name,guid,cre_time,lottery}){  
  56.         return (  
  57.             <li>{plat}--{type}--{name}--{guid}--{cre_time}--{lottery}</li>  
  58.         )  
  59.     }  
  60.   
  61. }  
  62.   
  63. /****** 使用ES6 + JSX 语法编写 class xx extends React.Component{} 创建一个组件 ******/  
  64. class CommentListContainer extends Component {  
  65.     /****** [ES6-constructor||ES5-getInitialState] ******/  
  66.     constructor(){  
  67.         super();  
  68.         this.state = {  
  69.             loading: true,  
  70.             title: '我喜欢的电影',  
  71.             movies: [],  
  72.         comments: []  
  73.     }  
  74.     }  
  75.   
  76.     componentDidMount(){  
  77.         $.ajax({  
  78.               type: 'GET',  
  79.               url: 'http://code.liuxinxiu.com/php/Interface/Jsoncallback.php',  
  80.               data: {GUID:'1'},  
  81.               dataType:'jsonp', //告诉Ajax调用$jsonp  
  82.               jsonp: "Jsoncallback", //zpeto-1.2支持自定义回调名  
  83.               success: function(data){  
  84.                   var yy=JSON.stringify(data);  
  85.                   var tlist=JSON.stringify(data.enttityList);  
  86.                   //console.log(tlist);  
  87.                   //console.log(this.state.title+'22');  
  88.                   this.setState({  
  89.                         comments:data.enttityList,  
  90.                         lottery:data.enttityList[0].lottery  
  91.                   });  
  92.                   var commentsStr=JSON.stringify(this.state.comments);  
  93.                   console.log("\n--->>commentsStr:\n"+commentsStr); //查看获取的数据  
  94.                   //console.log(this.state.comments+'33')  
  95.               }.bind(this),  
  96.               error: function(xhr, type){  
  97.                   alert(xhr+type+'Ajax error!');  
  98.               }  
  99.         });  
  100.         //console.log(this.state.comments+'++++--!!'); //ajax底下拿不到结果因为提前于异步  
  101.     }  
  102.   
  103.     render(){  
  104.         return <CommentList comments={this.state.comments}/>;  
  105.     }  
  106. }  
  107.   
  108.   
  109. /****** ES5输出给router ******/  
  110. //module.exports=DemoComponent;  
  111.   
  112. /****** ES6输出给router ******/  
  113. export default CommentListContainer;  
Tags: , , , , ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(6520)