Render React nested components - reactjs

Question

Is there a way to render the children of a React component under different divs?
<Page>
<Header> ... </Header>
<Content> ... </Content>
<Actions> ... </Actions>
</Page>
<div class="page">
<div class="header-wrapper>
<div class="header"> ... </div>
</div>
<div class="content-wrapper">
<div class="content"> ... </div>
<div class="actions"> ... </div>
</div>
</div>
Here I need the wrappers because the header is laid out differently from the area where content and actions are.
The obvious solution may be to introduce a Body component, but is there a more elegant way to abstract the concrete div tree which is needed to represent a certain layout from the logical components (Header, Content, Actions) which the Page declares.
Another solution which works is to pass the Header, Content, and Actions as properties as suggested in the React documentation:
<Page
header={
<Header> ... </Header>
}
content={
<Content> ... </Content>
}
actions={
<Actions> ... </Actions>
}
/>
Thanks,
George

Answer 1

React lets you access individual Children
<Page>
<Header> ... </Header>
<Content> ... </Content>
<Actions> ... </Actions>
</Page>
Inside <Page /> Component render
render() {
// when multiple elements are passed children prop is an array.
// extract each of the element passed from the array and place them
// wherever needed in the JSX
const [HeaderView, ContentView, ActionsView] = this.props.children;
<div class="page">
<div class="header-wrapper>
{HeaderView}
</div>
<div class="content-wrapper">
{ContentView}
{ActionsView}
</div>
</div>
}

Answer 2

Use React.Children.toArray to convert your props.children (that is an opaque data structure) to an array and safely reorganize them.
After convert to array, you can use find or forEach methods to get each one - Header, Content and Action - by testing the type of the item.
const children = React.Children.toArray(this.props.children);
const headerView = children.find(child => child.type.name === 'HeaderView');
const contentView = children.find(child => child.type.name === 'ContentView');
const actionsView = children.find(child => child.type.name === 'ActionsView');
<div class="page">
<div class="header-wrapper>
{headerView}
</div>
<div class="content-wrapper">
{contentView}
{actionsView}
</div>
</div>
Remember to declare HeaderView, ContentView and ActionsView with class or function declaration, not anonymous functions like:
const HeaderView = props => {
// some stateless rendering
};
Otherwise they might have no type.name to test against.

Answer 3

In Aurelia, you can use named slots to achieve this result, but in react the best workaround I have found is to do this:
// ...
const header = <Header someProp={someVal} />;
const content = <Content someOtherProp={someOtherVal} />;
const actions = <Actions action1={someAction} action2={someOtherAction} />;
return (
<Page header={header} content={content} actions={actions} />
);
and in page.jsx:
import React from 'react';
import PropTypes from 'prop-types';
export const Page = ({ header, content, actions }) => (
<div className="page">
<div className="header-wrapper">
<div className="header">
{header}
</div>
</div>
<div className="content-wrapper">
<div className="content">
{content}
</div>
<div className="actions">
{actions}
</div>
</div>
</div>
);
Page.propTypes = {
header: PropTypes.node.isRequired,
content: PropTypes.node.isRequired,
actions: PropTypes.node.isRequired,
};