Question

无论如何，还是在子树中可以找到实际输入(child.type === 'input')的任何入口点？

class MyForm extends React.Component {
  parseChildren(children) {
    React.Children.forEach(children, child => {
      if (child) {
        console.log('type', child.type);
        if (child.props && child.props.children) {
          this.parseChildren.bind(this)(child.props.children);
        }
      }
    });
  }
  componentWillMount() {
    this.parseChildren(this.props.children);
  }
  componentDidMount() {
    this.parseChildren(this.props.children);
  }
  render() {
    return <form>{this.props.children}</form>;
  }
}

class MyInput extends React.Component {
  render() {
    return (
      <p>
        My beautiful input <input {...this.props} />
      </p>
    );
  }
}

ReactDOM.render(
  <MyForm>
    <MyInput type="text" />
  </MyForm>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 1

您描述的问题不是很清楚。你想实现什么？

在我看来，这不是在MyForm内传递孩子然后只渲染其中一些孩子的最佳方法。

为什么不先将成分（输入）数据作为Form's children传递，然后仅传递那些符合搜索条件的元素，然后进行过滤？或者，也许我理解您错了？

迭代React组件子级

1 个答案: