I have this component that receives a header, main and footer. (header and footer are optional)
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>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 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>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.
// 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>