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-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---