父母如何改变反应中子组件的道具？

Question

我是新来的人，对此有些困惑。 我在网上阅读过许多文章，声称某个组件不能更改其自身的道具，但是父母可以更改其子级的道具。 但是，我没有看到任何实际显示如何执行此操作的内容。

我希望能够做到这一点：

class Parent extends Component {
  constructor(props) {
    super(props);
    this.childProps = {name:'name',age:12,type:'child'}; 
    this.changeChild = this.changeChild.bind(this);
  }

  changeChildName(newName) {
    //change prop 'name' of child here;
  }

  render() {
    return (
      <Child {...this.childProps} />
    );
  }
}

但是，我根本不知道该怎么做-尽管我在React上阅读的几乎所有材料都说父母可以改变孩子的道具。 我可以正常工作的内容如下：

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {name:'name',age:12,type:'child'}; 
    this.changeChild = this.changeChild.bind(this);
  }

  changeChildName(newName) {
    this.setState({name: newName});
  }

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

对我来说，当我要重新渲染的唯一一件事是子视图时，父级需要重新渲染似乎有点矫kill过正。 如何从<Parent>组件更改<Child>组件的道具？

次要问题

1）是否可以在不重新渲染组件的情况下更改组件的状态？

2）是否存在一个我们可以利用的onStateChange类型事件，或者我们仅具有componentWillReceiveProps ？

Answer 1

1）是否可以在不重新渲染组件的情况下更改组件的状态？

不，这没有什么意义。

2）是否存在我们可以利用的onStateChange类型事件，或者我们仅具有componentWillReceiveProps？

没有，使用componentWillReceiveProps 。

对我来说，当我要重新渲染的唯一一件事是子视图时，父级需要重新渲染似乎有点矫kill过正。

实际上，这是您自欺欺人的地方：父级IS已更改，因为返回的值已更改。 整个树将从根重新渲染。

Answer 2

我想你误会了。 父母更改孩子的道具非常简单...只需更改要渲染的道具即可。 现在，如果我们想在不重新提交父项的情况下对子项进行一些更改，该怎么办。 这也很简单。

给您的孩子附加一个裁判，并使用它。 现在，孩子无法更改自己的道具，因此您在孩子内部遇到的任何麻烦都将不再是道具。 每次父母放弃时，道具都会从父母那里传下来。

所以，

class Parent extends Component {
  constructor(props) {
    super(props);
    this.childProps = {name:'name',age:12,type:'child'}; 
  }

  doSomethingOnChild() {
    this.refs.child.callFunctionOfChildThatWillMessWithItself();
  }

  render() {
    return (
      <Child {...this.childProps} ref="child" />
    );
  }
}