在React中的this.props.children上调用setState或其他方法是一种好习惯吗？

Question

在我的理解中， 道具是由父母设置的，而状态是由组件私有的。

this.state对组件是私有的，可以通过调用this.setState（）进行更改。 更新状态后，组件将重新渲染自身。

父组件永远不要在其子组件上调用setState 。 这个对吗？

想象一下，父<Form>在提交时具有某种验证机制，并且希望传递所有<FormInput>的验证错误。 它应该通过道具执行此操作，还是可以在其子级上调用setState ？

最后，在子组件上调用任何内容是否是一种好习惯？

考虑以下方法：

validate: function () {
  var hasError = false;

  React.Children.forEach(this.props.children, function(child) {
    if (child.validate) {
      hasError = hasError || child.validate();
    }
  });

  return !hasError;
}

它可以工作，但是我不确定在React中可以使用鸭类儿童方法 。
你怎么看？

Answer 1

这不是一个好主意。

对于验证示例，尽管如果您的表单包含几个直接子组件也可以使用，但是如果您也想验证<div>字段怎么办？ 他们不会是直系子女，所以现在您的逻辑约束了您的标记。

一种实现您想要的方式的方法是，通过给孩子一个特殊的对象 ， 使孩子能够准确地控制他们需要的父母状态 。 React有一个内置的例子： ReactLink和LinkedStateMixin 。

您可以采用相同的想法并将其应用于验证。

Answer 2

react中的每个组件都是独立的，每个组件应保持自己的状态，而不是其他状态。 他们只能将道具发送到其他组件，并且其他组件可以决定是否更新其状态。 因此，将道具发送给孩子而不是调用孩子的setState是更好的做法。

但是，根据您在表单验证情况下的问题，如果表单已提交且表单无效，则表单会在其每个输入字段上触发Invalid事件。

因此，您可以编写函数来处理每个孩子上的无效事件，因此，您也不必将道具从父对象传递给孩子。