上次讲到state更新，DOM树才会更新，原理是React会监听组件的state。

现在来试一下。

修改Header.js,有如下三处变动,其中注释掉的代码是上一节的代码。

constructor(props){
    super(props);  //执行父类构造方法
    this.state={
      age:props.age
    }
    //this.age=this.props.age;  
  }

onMakeOrder(){
    this.setState({
      age:this.state.age+3
    })
    //this.age+=3;
    console.log(this);  //显示当前Header类的对象
  }

1 2	<div>your name is {this.props.name},your age is {this.state.age}</div> //表达式中上次是this.props.age

Header.js

import React, { Component } from 'react'; //固定写法
import PropTypes from 'prop-types';

class Header extends Component { //ES6写法
  
  constructor(props){
    super(props);  //执行父类构造方法
    this.state={
      age:props.age
    }
    //this.age=this.props.age;  
  }

  onMakeOrder(){
    this.setState({
      age:this.state.age+3
    })
    //this.age+=3;
    console.log(this);  //显示当前Header类的对象
  }

  render() {
    //console.log(this.props);  //显示父组件传来的参数
    return (
      <div>
        <h1>Header</h1>
        <div>your name is {this.props.name},your age is {this.state.age}</div>
        {/*<button onClick={() => this.onMakeOrder()} className="btn btn-primary">make me older</button>*/}
        <button onClick={this.onMakeOrder.bind(this)} className="btn btn-primary">make me older  </button> 
        <div>
          <h4>hobbies</h4>
          <ul>
          {this.props.user.hobbies.map((hobby,i) => <li key={i}>{hobby}</li>)}
          </ul>
        </div>
        <div>{this.props.children}</div>
      </div>
    );
  }
}

Header.propTypes={
  name: PropTypes.string,
  age: PropTypes.number,
  user: PropTypes.object,
  children: PropTypes.element.isRequired
}

export default Header;

效果

页面中的age会更改哟。

作者：@臭咸鱼

本文为作者原创，转载请注明出处：https://chouxianyu.github.io

欢迎转发和评论!

React学习（八）之组件的state属性

Header代码变动

Header.js

效果