reactjs - 访问 React 组件底层 DOM 树

Question

我有一个表单验证，它在提交时通过所有子级递归，检查子级是否是我的自定义“表单字段”组件之一（Input()、Checkbox()、SelectBox()）等，根据一些验证检查组件的值规则，如果值无效，则使用“无效”道具克隆组件。验证工作正常，无效的“表单字段”组件显示无效字段的样式。提交表单后，验证会在线进行。

如果表单无效，我想在提交表单后将页面滚动到第一个无效元素，但不幸的是组件没有暴露底层 DOM 三（通过 Fiber 对象除外），我无法获得任何组件的“ref” .

我通读了所有文档以及与该主题相关的 React 问题，显然无法访问组件的 DOM 树（除非通过 ref 转发，我试图避免这种情况，因为我希望表单处理所有与验证相关的代码）。

这个问题是我最后一次尝试：React 中是否有一种本地方式可以在不使用 ref 转发的情况下从父组件访问组件的 DOM 树？

更新 当我克隆组件时，我得到了 ref：

updateField = (field, validationRule) => 
  React.cloneElement(field, {
       invalid: true,
       validationMessage: validationRule.message(field.props),
       ref: node => node && this.invalidFields.push(ReactDOM.findDOMNode(node))
  });

标签： reactjs