javascript - 在 React 子组件上调用方法

Question

我想编写一个 Form 组件，它可以导出一个方法来验证其子项。不幸的是，窗体在其子项上“看不到”任何方法。

下面是我如何定义 Form 的潜在子级:

var Input = React.createClass({
  validate: function() {
    ...
  },
});

下面是我定义 Form 类的方式:

var Form = React.createClass({
  isValid: function() {
    var valid = true;
    this.props.children.forEach(function(component) {
      // --> This iterates over all children that I pass
      if (typeof component.validate === 'function') {
        // --> code never reaches this point
        component.validate();
        valid = valid && component.isValid();
      }
    });
    return valid;
  }
});

我注意到我可以使用 refs 在子组件上调用方法，但我不能通过 props.children 调用方法。

这种 React 行为是否有原因？

我该如何解决这个问题？

Answer 1

技术原因是当您尝试访问子组件时，它们还不存在(在 DOM 中)。它们尚未安装。它们已传递给您的 <Form>组件作为构造函数 prop 或方法作为 React class。 (因此在 React.createClass() 中命名为 class)。

正如您所指出的，这可以通过使用 refs 来规避，但我不推荐这样做。在许多情况下，refs 往往是一些非 React 目的的快捷方式，因此应该避免。

可能是 React 的设计使 parent 很难/不可能访问 child 的方法。他们不应该这样做。如果 child 的方法是 child 私有(private)的，那么 child 的方法应该在 child 身上:他们在 child 内部做一些不应该直接向上传达给 parent 的事情。如果是这样的话，那么处理应该在父级内部完成。因为 parent 至少拥有 child 拥有的所有信息和数据。

现在在你的情况下，我想象每个输入(子)组件都有某种特定的验证方法，检查输入值，并根据结果进行一些错误消息反馈。假设不正确的字段周围有红色轮廓。

在react中，可以这样实现:

• <Form>组件有状态，其中包括 runValidation bool 值。
• 尽快runValidation在 setState( { runValidation: true }); 中设置为 true React 会自动重新渲染所有子项。
• 如果您包括 runValidation作为所有 child 的 Prop 。
• 然后每个 child 都可以检查他们的 render()功能类似于 if (this.props.runValidation) { this.validate() }
• 将执行 validate()对 child 的作用
• 验证函数甚至可以使用 child 的状态(当新 Prop 进入时状态不会改变)，并将其用于验证消息(例如“请在您的密码中添加更复杂的符号”)

现在还没有解决的是，您可能希望在所有子项都验证了自己之后在表单级别进行一些检查:例如当所有 child 都没事时，提交表格。

要解决这个问题，您可以将 refs 快捷方式应用于最终检查并提交。并在你的 <Form> 中实现一个方法在 componentDidUpdate() 里面功能，检查每个 child 是否正常(例如有绿色边框)以及是否单击提交，然后提交。但作为一般规则，我强烈建议不要使用 refs。

对于最终表单验证，更好的方法是:

• 在你的 <Form> 中添加一个非状态变量它为每个 child 保存 bool 值。注意，它必须是非状态的，以防止 child 触发新的渲染周期。
• 传递一个validateForm作为每个 child 的(回调) Prop 。
• 内部validate()在每个 child 中，调用 this.props.validateForm(someChildID)更新表单中变量中的相应 bool 值。
• 在 validateForm 的末尾表单中的函数，检查所有 bool 值是否为真，如果是，则提交表单(或更改表单状态或其他)。

对于更冗长(并且更复杂)的 react 形式验证解决方案(使用助焊剂)，您可以查看 this article .