React props.children не массив

В соответствии с отредактировать документы, если у компонента есть несколько дочерних элементов, 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>
        );
    }

};

Что я передаю детям в другой метод render() компонента:

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

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

Ответ 1

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

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

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

Ответ 2

Я нашел это решение. Это сделает всех детей, одного или нескольких.

const BigMama = ({ children, styles, className }) => {
  return (
    <div
      styles={{styles}}
      className={(className ? className : '')}
    >
    {
      React.Children.map(children, (child) =>
        <React.Fragment>{child}</React.Fragment>)
    }
  </div>)
}


<BigMama
  styles={{border: 'solid groove'}}
  className='bass-player'
>
  <h1>Foo</h1>
  <h2>Bar</h2>
  <h3>Baz</h3>
  <h4>Impossibru!</h4>
<BigMama>

Ответ 3

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

const content = [
  <Img src="/photos/tomato.jpg"/>,
  <Img src="/photos/tomato.jpg"/>
];

<Two>
  {content}
</Two>

Ответ 4

В этом случае вам может пригодиться синтаксис распространения. Вы пробовали это?

<div>
    { [...this.props.children] }
</div>

Объедините с картой, чтобы управлять выводом.

<div>
    { [...this.props.children].map(obj => <div style="someStyling"> {obj} </div> ) }
</div>