Hi folks I’m very curious to find a way for importing parent/child components with the prefix of their parent component using dot notation.
Before taking your much time I would like to show you guys an example from the react-bootstrap components import style.
import Modal from "react-bootstrap";
# usage
function Example() {
return (
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer></Modal.Footer>
</Modal>
);
}
render(<Example />);
I’m trying to have this kind of a similar approach.
I have a Layout component and within that, I have 3 more child components Header, Body, and Footer.
Right now I’m using them like this
Layout.js
export const Header = ({ children }) => (
<div className="header">{children}</div>
);
export const Body = ({ children }) => <div className="body">{children}</div>;
export const Footer = ({ children }) => (
<div className="footer">{children}</div>
);
export const Layout = ({ children }) => {
return <section>{children}</section>;
};
const _default = {
Header: (props) => <Header {...props} />,
Body: (props) => <Body {...props} />,
Footer: (props) => <Footer {...props} />
};
export default _default;
App.js
import { Layout, Header, Body, Footer } from "./Layout";
import ParentLayout from "./Layout";
export default function App() {
return (
<div className="App">
<Layout>
<Header>Header goes here</Header>
<Body>Body goes here</Body>
<Footer>Footer goes here</Footer>
</Layout>
{/* as you can see from this example i can't use ParentLayout as a componet */}
<Layout>
<ParentLayout.Header>Header goes here</ParentLayout.Header>
<ParentLayout.Body>Body goes here</ParentLayout.Body>
<ParentLayout.Footer>Footer goes here</ParentLayout.Footer>
</Layout>
{/* so i was wondering if it can be done in this way */}
{/*
<ParentLayout>
<ParentLayout.Header>Header goes here</ParentLayout.Header>
<ParentLayout.Body>Body goes here</ParentLayout.Body>
<ParentLayout.Footer>Footer goes here</ParentLayout.Footer>
</ParentLayout>
*/}
</div>
);
}
I have created this playground so you can quickly hit and try.