React--基础学习混搭

最近学习一下React,通过  阮一峰《React 入门实例教程》 、React 入门教程、菜鸟教程--React 这三个学习基础使用，接下来看慕课网的三个教学视频。

React是什么我也不能说的很透彻，但学习时候觉得就是能摆脱不得复用的陋习，要什么就写什么组件。

以下内容包含  利用Jquery读取ajax，利用map遍历，同时用到了父子组件，组件生命周期，state,props。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.js"></script>
    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.js"></script>
    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p>根据ajax获得一个JSON对象  遍历出信息，同时定义一个按钮子组件，通过props.id传递，并将ID打印出来 </p>
<div id="example"></div>
<script type="text/babel">
//子组件 按钮
var ButtonDel = React.createClass({
    handleClick : function(){
        console.log(this.props.id)
    },
    render: function(){
        return (
            <button id={this.props.id} onClick={this.handleClick}>del me</button>//读取父组件上的id属性
        )
    }
});

var UserGist = React.createClass({
//定义初始化state 我当做声明来用
    getInitialState : function(){
        return{
            config :[]
        }
    },
//组件第一次渲染调用后，使用ajax
  componentDidMount: function() {
    var config = this.state.config;
    $.get(this.props.source, function(result) {
//拿到返回的值之后设置state 把整个json给config
     this.setState({
        config : result
     });
    }.bind(this));
  },

  render: function() {
    var config = this.state.config;
    var items = config.map(function(item){
        return (
            <li>
               { item.owner.login}  link  {item.html_url}
               <ButtonDel id={item.id}/> //这个是按钮子组件
            </li>
        );
    },this); //这里的this是做什么用的呢？
// <ButtonDel id={item.id} delClick={this.handleClick} > 如果上面的ButtonDel出现this.handleClick 需要上面的this
    return (
      <div>
        {items}
      </div>
    );
  }
});
//定义组件
ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists"/>,
  document.getElementById('example')
);
    </script>
</body>
</html>

上面的结果就是点击console.log   button上面的id，再进行别的操作。

以上只是小小整合，期待能更加深入进入学习.....待续

posted @ 2016-05-15 22:45  邱XX  阅读(458)  评论(0)  编辑  收藏  举报