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

Question

根据我的理解，props 是由父级设置的，state 是组件私有(private)的。

this.state is private to the component and can be changed by calling this.setState(). When the state is updated, the component re-renders itself.

父组件不应调用setState永远在它的 children 身上。这是正确的吗？

想象一下 parent <Form>在提交时有一些验证机制，并且希望通过所有<FormInput>验证错误。 应该通过 props 来做到这一点，还是可以调用 setState对它的 child ？

最后，在子组件上调用任何东西是一个好习惯吗？

考虑这个方法:

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> 内的字段该怎么办？还有？他们不会是直接子代，所以现在你的逻辑限制了你的标记。

实现您想要的目的的一种方法是通过提供一个特殊的对象，为 children 提供他们所需的对 parent 状态的精确控制级别。 React 有一个内置的示例: ReactLink and LinkedStateMixin .

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