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

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

次要问题

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

2）我们可以使用onStateChange类型的活动，或者我们只有componentWillReceiveProps吗？

Answer 1

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

不，这没什么意义。

2）我们可以使用onStateChange类型事件，还是只有componentWillReceiveProps？

没有，请使用componentWillReceiveProps。

对于我来说，当我想要重新呈现的唯一内容是子视图时，父需要重新渲染似乎有点过分。

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

Answer 2

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

为您的孩子附上裁判并使用它。现在，孩子不能改变自己的道具，所以你在孩子里面弄乱的任何东西都不会成为道具。每次父母重新渲染时，道具都会从父母传下来。

所以，

  moveRobot: function(string) {
    string = string.toUpperCase();
    if (this.checkCommandString(string)) {
      var array = string.split('');
      for (var i = 0; i < array.length; i++) {
        // return this.moveRobotToOnePosition(i);
        this.moveRobotToOnePosition(array[i]); // don't use return here unless you want to exit the function.
      }
      return true;
    }
    this.errorMessageNumber = 0;
  }

父母如何改变儿童组件的道具？

2 个答案: