[英]React - Component export multiple components
我有这个组件 FullView,它接收 header、主要和页脚。 (页眉和页脚是可选的)
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>
但我不想通过道具传递 jsx。 我想做这样的事情。
我该怎么做?
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>
看起来您想要创建FullView
组件的复合组件。 声明Header
、 Main
和Footer
组件,然后将它们作为属性添加到FullView
组件上。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.