Итерация дочерних компонентов React - PullRequest
Новая
       8

Итерация дочерних компонентов React

0 голосов
/ 24 октября 2018

Есть ли вообще какая-либо точка входа, где я могу найти фактический ввод (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>

1 Ответ

0 голосов
/ 24 октября 2018

Описанная вами проблема не очень понятна.Чего вы хотите добиться?

Мне кажется, это не лучший способ передать дочерние элементы внутрь MyForm, а затем отобразить только некоторые из них.

Почему бы не отфильтровать компоненты(вводит) данные, прежде чем передать их как Form's children, а затем передать только те из них, которые соответствуют вашим критериям поиска?Или, может, я вас неправильно понял?

...