父组件如何在响应中更改子组件的道具？

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} />
    );
  }
}

当我只想重新渲染子视图时，父视图需要重新渲染，这对我来说似乎有点过分了。如何更改<代码>的道具

次要问题

1）有没有可能在不重新渲染组件的情况下改变组件的状态？

2） 是否存在我们可以点击的onStateChange类型事件，或者我们是否只有组件将接收props？

Answer 1

我想你误解了。这是非常简单的家长改变孩子的道具。。。只需更改渲染的道具。现在，如果我们想在不重新命名父对象的情况下对子对象进行一些更改，该怎么办。这也很简单。

为您的孩子附加一个ref并使用它。现在，孩子不能改变自己的道具，所以你在孩子身上弄乱的任何东西都不会是道具。每次父级重新渲染时，都会从父级传递道具。

所以

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" />
    );
  }
}

Answer 2

1）有没有可能在不重新渲染组件的情况下改变组件的状态？

不，这没有什么意义。

2）是否有onStateChange类型的事件，我们可以利用，还是我们只有组件WillReceiveProps？

没有，请使用组件将接收道具。

当我只想重新渲染子视图时，父视图需要重新渲染，这对我来说似乎有点过分了。

实际上，这就是你欺骗自己的地方：父对象发生了变化，因为它返回的内容发生了变化。正在从根重新渲染整个树。