zoukankan      html  css  js  c++  java
  • React 类组件 传值 以及私有属性state

    传值:

    使用props接收组件的自定义属性,这个接收是类组件自动接收的,在类组件的this中,包含有props这个对象,组件的自定义属性会被收集到这个对象中,那么在类组件中就可以使用this.props获得这个对象保存的值,从而进行逻辑或者相关操作。

    举例如下:

    //定义  类 组件
    class Ae3 extends Component {
      render() {
        // 打印this对象
        console.log(this)
        // 使用传过来的id值
        return <div id={this.props.id}>hello React</div>
      }
    }
    export default Ae3
      {/* 调用类组件,并传入值,及自定义属性id */}
        <Ae3 id={id}></Ae3>

    打印this得到的结果:

    可以看到,有props属性,而我们传过去的值就保存在这里,并且还可以看到,有state属性,这说明类组件自身有这个跟属性,并且该属性为null,这是因为我们没有使用state的原因。

    私有属性,state,类似于vue中的data:

    看代码

    //定义  类 组件
    class Ae3 extends Component {
      constructor(props) {
        // 打印接收到的值
        console.log(props)
        // 调用父类的构造方法,并得到this
        super()
        console.log('------分界线-------')
        // 打印this
        console.log(this)
        // 打印this中的props属性
        console.log(this.props)
        // 私有属性state的定义声明或者叫初始化
        this.state = {
          id: 1
        }
      }
      render() {
        // 打印this对象
        console.log(this)
        // 使用传过来的id值
        return <div id={this.state.id+"xxxxxxxxxx"+this.props.id}>hello React</div>
      }
    }
    export default Ae3

    调用组件:

        {/* 调用类组件,并传入值,及自定义属性id */}
        <Ae3 id={id}></Ae3>

    接下来,看打印结果:

     但在render方法中打印的this是可以使用的。

    导致构造方法中的this是undefined的是因为,super方法只是得到this,想要使用其属性,必须要给super方法传参,操作如下:

     这样就好了,这就是给super方法传参的原因,是为了得到完整且可用的this。

    得到完整且可用的构造函数中的(再次强调这是  构造函数  中的this)this后能干嘛?

    答:能初始化state中的值:

    // 私有属性state的定义声明或者叫初始化
        this.state = {
          // 给私有属性赋值接收过来的值
          id: this.props.id //这时候这么调用this以及this中的属性就不会出现undefined的情况了
        }

    有关 setState的使用,只有这两个场景下才能使用:

    1:构造函数中,用来初始化。

    2:自定义函数和钩子函数中,作用:用来更新或者改变state属性。

     关于ES6类的继承和this以及props的相关问题,请看:https://www.cnblogs.com/zqblog1314/p/12902707.html

    export default Ae3
  • 相关阅读:
    ubuntu分屏终端
    Xcode-5.1.1更改文件盯作者
    Swift——(两)Swift访问元组
    Android Loader使用,屏幕解锁,重复荷载
    医疗信息季节:第二十三届中国国际医疗仪器设备展览会暨研讨会 思考
    UIBarButtonItem 小记边
    L轻松学习inux教程5 知识与学习bash
    Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI
    Android Context 上下文 你必须知道的一切
    Android 自定义控件 优雅实现元素间的分割线 (支持3.0以下)
  • 原文地址:https://www.cnblogs.com/zqblog1314/p/12906127.html
Copyright © 2011-2022 走看看