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

Question

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

我知道有很多开源解决方案，但我想在开始挑选任何解决方案之前了解一些机制。我有一个 Form 组件设置来像这样测试:

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 的力量主要围绕着它所鼓励的设计模式，而你正在做的就是打破这种模式； Component 应该只与他们的直系子级对话并响应他们的直系父级。如果您需要比这更深入，那么中间的组件需要负责传递该数据。

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