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>
  }
}

  {/* 调用类组件，并传入值，及自定义属性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>
  }
}

调用组件：

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

接下来，看打印结果：

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

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

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

得到完整且可用的this后能干嘛？

答：能初始化state中的值：

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

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