zoukankan      html  css  js  c++  java
  • react.js学习之路四

    针对学习react.js中,我感觉最大的疑惑点就是bind(this)的绑定和指向问题了,我被这个问题弄的头昏,有时候调用组件的时候,直接显示undefined,不存在这个组件,当时的心情是崩溃的,整个人的状态是不好的,所以今天要好好学习bind(this)这个问题。

    在我们创建一个组件的时候,会在他的父组件调用这个子组件,这是,这个组件的指向就是这个父组件了,但是在子组件内部的一些指向就不能使用了,因为在这个父组件中不存在这个子组件所包含的属性,此时,就需要使用bind(this)来绑定这个子组件,这样,这个子组件中函数的指向就是这个子组件自身了。

    var Father = React.createClass({

      click:function(){

        //函数的一些业务逻辑

      },

      render:function(){

        return (

          //父级函数包含一个组件,并添加了一些属性,并具有业务逻辑

          <List click={this.click} />

        )

      }

    })

    var List= React.createClass({

      render:function(){

        <ul>

          //在子组件中调用这个函数的时候,如果不添加bind(this),这个函数的指向就是 li ,而不是这个click函数,所以需要添加bind(this)绑定这个函数指向正确

          <li onClick={this.props.click.bind(this)}>name</li>

        </ul>

      }

    })

    在es5和es6中,有时候匿名函数会指向undefined和window,这是如果方法体内需要使用到当前的组件的this,就可以使用bind(this)进行绑定

    其实我感觉整体来说,对于bind(this)绑定来说,可以说是在自己的组件创立,但是在其他地方调用的时候,因为指向已经改变了,所以,需要使用bing(this),让这个组件依然可以指向自己组件内部就可以了。

    整体来说就是这样了,就看你的组件调用到什么地方了,,,好了,大概思路就是这样了

    还有一种情况,就是bind(this,i,item),不仅绑定了this,还绑定了更多的参数,这个怎么理解呢,这个其实在react 的API上有介绍,但是当时看这个教程一眼带过,没有细看,现在饭回来看就可以理解了,地址:http://reactjs.cn/react/tips/communicate-between-components.html

    var handleClick = function(i, props) {

      console.log('You clicked: ' + props.items[i]);

    }

    function GroceryList(props) {

    return (

      <div> {props.items.map(function(item, i) {

        return (

           <div onClick={handleClick.bind(this, i, props)} key={i}>{item}</div> ); }

        )}

      </div> );

    }

    ReactDOM.render( <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode );

    具体解释可以这么理解,对于handleClick(i ,props) 这个函数中,含有两个参数,在调用这个组件的时候,我们绑定了这个函数,这一点没有问题,但是有的会疑惑后面的i

    和props是什么鬼,这里有解释:

    注意使用bind(this, arg1, arg2, ...):我们只是传递更多的参数handleClick这不是一个新的React概念; 它只是JavaScript。

    也就是这个不是react的bind(this)的一个概念,这个是我们前面创建的handleClick (i,props)函数里面传递的两个参数,只是在bind(this)的后面添加这个函数了而已。

  • 相关阅读:
    jsop
    对象冒充call
    php中的static
    PHP对象在内存堆栈中的分配
    递归
    php简单日历
    php分页类
    请写一个函数,实现以下功能: 字符串“open_door” 转换成 “OpenDoor”、”make_by_id” 转换成 ”MakeById”
    php 计算两个文件之间的相对路径方法
    php冒泡排序
  • 原文地址:https://www.cnblogs.com/liumcb/p/6511098.html
Copyright © 2011-2022 走看看