如何解决导出默认和多个子组件
我需要以下组件结构:
import Layout from "./components/Layout";
<Layout>
<Layout.Header>...</Layout.Header>
<Layout.Body>...</Layout.Body>
<Layout.Footer>...</Layout.Footer>
</Layout>
我尝试通过以下方式实现:
import React from "react";
const Layout = (props) => {
return <div className="layout">{props.children}</div>;
};
const Header = (props) => {
return <header className="layout__header">{props.children}</header>;
};
const Body = (props) => {
return <div className="layout__body">{props.children}</div>;
};
const Footer = (props) => {
return <footer className="layout__footer">{props.children}</footer>;
};
export { Header,Body,Footer };
export default Layout;
但这似乎不起作用。谁能告诉我如何正确导出这些函数以便我可以使用上述结构?
解决方法
感谢这个答案Using dot notation with functional component,我发现解决方案是:
const Layout = (props) => {
return <div className="layout layout--green">{props.children}</div>;
};
const Header = (props) => {
return <header className="layout__header">{props.children}</header>;
};
const Body = (props) => {
return <div className="layout__body">{props.children}</div>;
};
const Footer = (props) => {
return <footer className="layout__footer">{props.children}</footer>;
};
Layout.Header = Header;
Layout.Body = Body;
Layout.Footer = Footer;
export default Layout;
,
您导出组件的方式看起来不错,但您不应该像这样导入模块:
import Layout from "./components/Layout";
<Layout>
<Layout.Header>...</Layout.Header>
<Layout.Body>...</Layout.Body>
<Layout.Footer>...</Layout.Footer>
</Layout>
你应该像下面这样导入它:
import Layout,{ Body,Footer,Header } from "./components/Layout";
<Layout>
<Header />
<Body />
<Footer />
</Layout>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。