React slot All In One
React slot All In One
children component
function Header() {
return null
}
function Body() {
return null
}
function Footer() {
return null
}
class BaseLayout extends React.Component {
static Header = Header
static Body = Body
static Footer = Footer
render() {
const {children} = this.props
const header = children.find(child => child.type === Header)
const body = children.find(child => child.type === Body)
const footer = children.find(child => child.type === Footer)
return (
<div class="container">
<header>
{header ? header.props.children : null}
</header>
<main>
{body ? body.props.children : null}
</main>
<footer>
{footer ? footer.props.children : null}
</footer>
</div>
)
}
}
export default BaseLayout
const layout = (
<BaseLayout>
<BaseLayout.Header>
<h1>Here might be a page title</h1>
</BaseLayout.Header>
<BaseLayout.Body>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</BaseLayout.Body>
<BaseLayout.Footer>
<p>Place some contact info here.</p>
</BaseLayout.Footer>
</BaseLayout>
)
refs
https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx
https://reactjs.org/docs/jsx-in-depth.html#functions-as-children
https://reactjs.org/docs/jsx-in-depth.html#javascript-expressions-as-children
https://reactjs.org/docs/jsx-in-depth.html#jsx-children
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/15866641.html
未经授权禁止转载,违者必究!