React - 组件导出多个组件

Question

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

 const FullView = (props) => { const { header, main, footer } = props; return ( <div> {header && <header>{header}</header>} <main>{main}</main> {footer && <footer>{footer}</footer>} </div> ); }; ReactDOM.render( <FullView 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 FullView = (props) => { const { children } = props; return ( <div> {children} </div> ); }; ReactDOM.render( <FullView> <FullView.Header> <p>content header</p> </FullView.Header> <FullView.Main> <p>content main</p> </FullView.Main> <FullView.Footer> <p>content footer</p> </FullView.Footer> </FullView>, 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>

Answer 1

It looks like you are wanting to create a compound component of the FullView component. Declare the Header , Main , and Footer components and then add them as properties on the FullView component.

 const FullView = ({ children }) => <div>{children}</div>; const Header = ({ children }) => <div>{children}</div>; const Main = ({ children }) => <div>{children}</div>; const Footer = ({ children }) => <div>{children}</div>; FullView.Header = Header; FullView.Main = Main; FullView.Footer = Footer; ReactDOM.render( <FullView> <FullView.Header> <p>content header</p> </FullView.Header> <FullView.Main> <p>content main</p> </FullView.Main> <FullView.Footer> <p>content footer</p> </FullView.Footer> </FullView>, document.body );

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