score:12

Accepted answer

Yes, this.props.children will return an array so if you always want to load specific children, then just reference those children by index in your wrapper. Then you could just turn icons and fields into wrapper components. Here is a working jsfiddle. See how the render method of App is exactly what you want.

CreditCardForm render:

<div>
    <div className='some'>
      <div className='special'>
        <div className='nesting'>
          {this.props.children[0]}
        </div>
      </div>
    </div>
    {this.props.children[1]}
 </div>

Fields and Icons render:

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

App render:

<CreditCardForm>
    <Icons>
        <IconBogus />
    </Icons>
    <Fields>
      <FieldCardNumber />
      <FieldName />
    </Fields>
</CreditCardForm>

score:1

yes, you can do it with child props. Read more @docs:

https://facebook.github.io/react/tips/children-props-type.html

And of course check out React.Children

https://facebook.github.io/react/docs/top-level-api.html#react.children


Related Query

More Query from same tag