Tengo este componente que recibe un encabezado, principal y pie de página. (el encabezado y el pie de página son opcionales)
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>Pero no quiero pasar el jsx a través de los accesorios. Quiero hacer algo como esto.
¿Cómo lo hago?
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>Parece que desea crear un componente compuesto del componente FullView . Declare los componentes Header , Main y Footer y luego agréguelos como propiedades en el componente FullView .
// FullView.js 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; // export default FullView; // index.js 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>