React子组件上的调用方法

小编典典

React子组件上的调用方法

reactjs

我想编写一个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;
  }
});

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

这种React行为是否有原因？

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

阅读 682

2020-07-22

共1个答案

小编典典

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

正如您所指出的，可以使用refs来绕开它，但是我不建议这样做。在许多情况下，ref往往是不想要的东西的捷径，因此应避免使用。

可能是设计使然，使父母难以/不可能使用孩子的方法。他们不应该这样做。如果孩子的方法对孩子是私密的，则应该在孩子的方法中：他们在孩子内部做某些事情，这些事情不应该直接向上传达给父母。如果真是这样，那么应该在父级内部进行处理。因为父母至少拥有孩子拥有的所有信息和数据。

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

以反应方式，可以通过以下方式实现：

该<Form>组件具有状态，其中包括一个runValidation布尔值。
只要runValidation设置为true，内部的setState( { runValidation: true });自动反应再使所有儿童。
如果您包括runValidation所有孩子的道具。
然后每个孩子都可以通过以下方式检查自己的render()功能if (this.props.runValidation) { this.validate() }
这将validate()在孩子中执行功能
验证功能甚至可以使用孩子的状态（当新道具进入时状态不会更改），并将其用于验证消息（例如，“请在密码中添加更复杂的符号”）

现在，这还不能解决，是您可能要在所有孩子都通过验证之后在表单级别进行一些检查：例如，当所有孩子都可以的时候，提交表单。

为了解决这个问题，您可以将refs快捷方式应用于最终检查并提交。并在函数<Form>内部实现一个方法componentDidUpdate()，检查每个孩子是否可以（例如，带有绿色边框）以及是否单击提交然后提交。但作为一般规则，我强烈建议您不要使用引用。

对于最终形式验证，更好的方法是：

在您的内部添加一个非状态变量，<Form>该变量包含每个孩子的布尔值。注意，它必须是非状态的，以防止子级触发新的渲染周期。
将validateForm功能作为（回调）道具传递给每个孩子。
validate()在每个子对象的内部，调用this.props.validateForm(someChildID)会更新Form中变量中的相应布尔值。
在validateForm表单函数的末尾，检查所有布尔值是否都为真，如果是，则提交表单（或更改表单状态或其他）。

对于更长（且更复杂）的方法来进行反应（使用助熔剂）的形式验证，可以查看本文。

2020-07-22