子组件上的调用方法

Question

我想编写一个表单组件，它可以导出一个方法来验证其子级。不幸的是，表单在其子级上没有“看到”任何方法。

以下是我如何定义一个潜在的形式子项：

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调用方法。儿童

这种行为有什么原因吗？

我怎样才能解决这个问题？

Answer 1

我不确定我是否遗漏了什么，但在尝试@wintvelt建议的方法后，每当我在React的render方法中调用runValidation方法时，我都会遇到问题，因为在我的情况下runValidation通过在其中调用setState来更改状态，因此触发渲染方法，这显然是一种不好的做法，因为渲染方法必须是纯的，如果我将runValidation放入willReceiveProps中，它将不会第一次被调用，因为if条件尚未为真（此条件在父组件中使用setState进行更改，但在第一次调用willReceiveProps时仍然为false）。

Answer 2

技术上的原因是，在您尝试访问子组件时，它们还不存在（在DOM中）。他们还没有上马。它们已传递到您的

正如您所指出的，这可以通过使用REF来避免，但我不推荐使用REF。在许多情况下，REF往往是一些非预期反应的捷径，因此应该避免。

可能是出于设计，react使得父母很难/不可能访问孩子的方法。他们不应该这样做。如果孩子的方法是私人的，那么孩子的方法应该在孩子身上：他们在孩子身上做一些不应该直接向上传达给父母的事情。如果是这样的话，那么应该在父级内部进行处理。因为父对象至少拥有子对象拥有的所有信息和数据。

现在在您的例子中，我设想每个输入（子）组件都有某种特定的验证方法，该方法检查输入值，并根据结果执行一些错误消息反馈。假设在不正确的字段周围有一个红色的轮廓。

通过react方式，可通过以下方式实现：

现在这还没有解决的问题是，您可能希望在所有子级验证自己之后在表单级别进行一些检查：例如，当所有子级都确定时，提交表单。

要解决这个问题，可以将refs快捷方式应用于最终检查并提交。并在

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

• 在

对于在react（with flux）中形成验证的更冗长（更复杂）的解决方案，您可以查看本文。