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

【问题标题】：Is it a good practice to call setState or other methods on this.props.children in React?在 React 中对 this.props.children 调用 setState 或其他方法是一种好习惯吗？
【发布时间】：2014-04-25 10:28:11
【问题描述】：

据我了解，props 是由父级设置的，state 是组件私有的。

this.state 是组件私有的，可以通过调用 this.setState() 来更改。当状态更新时，组件会重新渲染自己。

父组件永远不应该在其子组件上调用setState。这是正确的吗？

假设父 <Form> 在提交时有一些验证机制，并希望通过所有 <FormInput>s 验证错误。 应该通过 props 执行此操作，还是可以对其子级调用 setState？

最后，在子组件上调用 anything 是一种好习惯吗？

考虑这种方法：

validate: function () {
  var hasError = false;

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

  return !hasError;
}

它可以工作，但是我不确定鸭子类型的子方法是否适合在 React 中使用。
你怎么看？

【问题讨论】：

您应该更新子道具，而不是它们的状态。但我看不出你想在你的代码中如何做到这一点，看起来你正在从你的子组件中收集valid 状态，不是吗？
@David：这段代码在每个拥有这种方法的孩子上调用validate()。同样，我认为这不是一个好方法，但我无法解释为什么。
好的...但是您的问题是什么？标题与您的代码示例不符。
@David：有两个问题密切相关。我编辑了标题并添加了重点。
我看不出调用子方法和设置它的状态有什么相似之处，只是setState也是一个方法。但处理状态与调用自定义方法完全不同。

标签： javascript reactjs

【解决方案1】：

这不是一个好主意。

对于验证示例，虽然如果您的表单有几个直接子组件，它会起作用，但如果您也想验证 <div> 内的字段怎么办？他们不会是直接的孩子，所以现在你的逻辑限制了你的标记。

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

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

【讨论】：

【解决方案2】：

react 中的每个组件都是独立的，每个组件都应该保持自己的状态而不是其他组件。他们只能将 props 发送给其他组件，并且由其他组件决定是否更新其状态。所以最好给孩子们发送道具，而不是打电话给他们的setState。

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

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

【讨论】：

你打算从某个地方引用吗？答案格式为引号。