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 and LinkedStateMixin。

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

Answer 2

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

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

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

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

2 个答案: