4. 动态参数的设置

• state查询
• setState改变参数

1.state进行查询

// App.js

class Content extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '123'
    };
  }

  render() {
    return <div>{this.state.content}</div>;
  }
}

Note:

1. 这里通过{}来表明模板插入变量 vue中是{{}}注意即可，然后通过读取this.state.content来读取constructor中构造的变量state
2. 这里的state是默认字段,用state来代表组件的仓库值

2.setState改变参数的方法

class Content extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '123'
    };
  }
  // 在页面挂在完后进行的任务，生命周期函数
  componentDidMount() {
    const _this = this;
    setTimeout(() => {
      _this.setState({ content: 'change' });
    }, 1000);
  }

  render() {
    return <div>{this.state.content}</div>;
  }
}

function App() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}

Note:

1. 利用setState对state仓库中的参数进行改变，如果直接使用this.state.content =1;没有任何的效果，类似于vue中通过this.$set设置引用类型的赋值会比较有效；
2. 在App应用中，我们将Header和Content的组件都嵌套在App下