React props.children не является массивом

Question

В соответствии с react docs, если компонент имеет несколько дочерних элементов, this.props.children должен быть массивом.

Я следующий компонент:

export class Two extends React.Component { 

    componentDidMount() { 
     console.log(Array.isArray(this.props.children)); // false 
    } 

    render() { 

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

}; 

Что я прохожу детей в метод другого компонента визуализации():

<Two> 
    <Img src="/photos/tomato.jpg"/> 
    <Img src="/photos/tomato.jpg"/> 
</Two> 

Почему this.props.children не массив? Что еще более важно, как я могу заставить его быть одним?

Answer 1

Нашел лучшее решение для этого после некоторого рытья в React.Children source. Похоже, в React 0.14 был добавлен метод .toArray(), который вскоре будет выпущен.

После того, как он выходит, мы сможем просто сделать что-то вроде этого:

let children = React.Children.toArray(this.props.children);