reactjs - 如何递归分析和修改 React 中组件的后代？

Question

我正在编写一个表单包装器，我希望它动态更新后代以添加错误消息并为具有验证错误的表单元素添加错误样式。

我知道我可以使用 React.Children.map遍历 child ，但我需要递归遍历所有后代，搜索 <input>和 <button>元素。

关于如何做到这一点有什么想法吗？

例子:

const FormWrapper = (props) => {
  let children = this.props.children;

  if (this.prop.disabled) {
    // Note:  do something here with children to recursively
    // look for form elements, update their props.
  }

  return (
    <form>
      {children}
    </form>
  );
}

用法:

<FormWrapper errors={this.errors}>
  <div className="row">
    <div className="col">
      <label>Email:</label>
      <input type="text" name="email">
    </div>
  </div>

  <div className="row">
    <div className="col">
      <label>Password</label>
      <input type="password" name="password">
    </div>
  </div>
</FormWrapper>

Answer 1

没有干净、最优和可行的方法来递归子图。您会发现 hack(例如手动调用子项上的 render)但没有什么干净的。