访问React组件底层的DOM树

Question

我有一个表单验证，该表单验证将在提交时遍历所有子项，检查子项是否是我的自定义“表单字段”组件（Input（），Checkbox（），SelectBox（））等之一，并检查组件的值根据某些验证规则，如果值无效，则使用“无效”属性克隆组件。验证可以正常工作，并且无效字段的“表单字段”组件显示样式无效。提交表单后，验证会以内联方式进行。

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

我已经阅读了所有文档以及与该主题相关的React问题，并且显然无法访问组件的DOM树（除非通过ref转发，我试图避免这样做，因为我希望Form能够处理所有验证相关代码）。

这个问题是我最后的尝试：React中是否有一种本机方式可以从父组件访问组件的DOM树而不使用引用转发？

更新 克隆组件时得到引用：

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