React - Component export multiple components

Question

I have this component that receives a header, main and footer. (header and footer are optional)

const View = (props) => {
  const { header, main, footer } = props;
  return (
   <div>
     {header && <header>{header}</header>}
     <main>{main}</main>
     {footer && <footer>{footer}</footer>}
  </div>
  );
};


 ReactDOM.render(
    <View header={<p>content header</p>} main={<p>content main</p>} footer={<p>content footer</p>} />,
    document.body
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

But I don't want to pass the jsx through the props. I want to do something like this.

How do i do it?

const View = (props) => {
  const { children } = props;
  return (
   <div>
   {children}
  </div>
  );
};


 ReactDOM.render(
    <View>
      <View.Header>
        <p>content header</p>
      </View.Header>
      <View.Main>
        <p>content main</p>
      </View.Main>
      <View.Footer>
        <p>content footer</p>
      </View.Footer>
    </View>
    ,
    document.body
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>