React props.children 不是数组

Question

According to the react docs , if a component has multiple children, this.props.children should be an array.

I have the following component:

export class Two extends React.Component {

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

    render() {

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

};

Which I pass children to in another component's render() method:

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

Why is this.props.children not an array? More importantly, how can I get it to be one?

Answer 1

Found a better solution to this after some digging in the React.Children source . It looks like a .toArray() method has been added in React 0.14, soon to be released.

Once it is out we will be able to simply do something like this:

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

It's documented in https://reactjs.org/docs/react-api.html#reactchildren

Answer 2

I found this solution. It will render all children, one or more.

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>

Answer 3

There are many ways and some are mentioned above already but if you wanna keep it simple and want to achieve this without any utility then below should work

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

<Two>
  {content}
</Two>

Answer 4

You might find the spread syntax useful in this case. Have you tried it out?

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

Combine with map to manipulate the output.

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

Answer 5

If you want to do something with the results (eg. render the array in a list), this is how you can use children. The React docs talk about how the map function works with children, as it's an opaque structure.

export const List = ({ children }) => {
  return (
    <ul>
      {React.Children.map(children, child => <li>{child}</li>)}
    </ul>
  )
}

So then you can call

<List>
  {item.name}
  {item.price}
</List>

Answer 6

Is it because is it a DOM node? Try console.log(this.props.children) you will notice that it logged a array of objects (note that each object contains information of the child element of the component). I read that node and array are not the same tho they have a same format. Visit Javascript DOMNode List for more information.