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

Question

我是新手，对某些事情有点困惑。我在网上读过很多文章，声称组件不能更改自己的 props，但父级可以更改其子级的 props。但是，我没有看到任何实际显示如何执行此操作的内容。

我希望能够做到这一点：

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

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

次要问题

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

2) 是否有我们可以利用的onStateChange 类型的事件，或者我们只有componentWillReceiveProps？

Answer 1

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

不，而且意义不大。

2) 是否有我们可以利用的 onStateChange 类型的事件，或者我们只有 componentWillReceiveProps？

没有，使用componentWillReceiveProps。

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

实际上，这是您欺骗自己的地方：父级已更改，因为它返回的内容已更改。整个树正在从根重新渲染。

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