如何使用 React/Redux 找到所有嵌套组件？

Question

我希望使用 Redux 验证表单。我正在尝试使用制作一个表单组件，它将遍历子组件并找到各种输入组件（不要与本机 <input> 混淆。

我知道有很多开源解决方案，但我想在开始选择之前了解一些机制。我有一个表单组件设置来测试这样的：

import React from 'react';

export default class Component extends React.Component {
  componentDidMount() {
    this._iterate(this.props.children);
  }

  render(){
    return (
      <form {...this.props}>{this.props.children}</form>
    );
  }

  _iterate(children) {
    React.Children.forEach(children, child => {
      console.log(child);
      if (child.props.children) {
        console.log('get children');
        this._iterate(child.props.children);
      }
    });
  }
};

然后我有另一个具有这样渲染的组件：

render() {
  return (
    <div>
      <Form>
        <ComponentA />
        <ComponentB />
      </Form>
    </div>
  );
}

现在ComponentA 或ComponentB 可能有一个组件可以嵌套更多组件。在这些组件中将是我为 Text、Select 等制作的 React 组件。

上面的代码只是 console.log 组件，以及它们的任何子组件，在这个特定的渲染中。它不会跳入ComponentA children。

有解决办法吗？

Answer 1

这不是您真正想要解决的问题。

react 的强大之处主要在于它所鼓励的设计模式，而您所做的就是打破这种模式；组件应该只与他们的直系子女交谈并回应他们的直系父母。如果您需要比这更深入，那么中间的组件需要负责传递该数据。

与其试图深入研究 ComponentA 和 ComponentB 的内部结构，这些组件本身应该具有您需要的可访问性道具。即<ComponentA onChange={whatever} errorMessage={whatever}/> 等，然后将这些道具挂钩到他们的孩子应该发生在 ComponentA 中。