react复合组件

复合组件

组件vs继承

import React from 'react'
import "./LayOut.css"

export default function LayOut(props) {
    const {headerShow=true,bottomShow=true} = props;
    return (
        <>
            {headerShow&&<div className="header">header</div>}
            {props.children.content}
            {props.children.text}
            <button onClick={props.children.btnClick}>我是按钮</button>
            {bottomShow&&<div className="bottom">bottom</div>}
        </>
    )
}

import './App.css';
import LayOut from './components/LayOut'
function App() {
  return (
    <LayOut headerShow={true} bottomShow={false}>
      {/* <div className="App">
        111
      </div> */}
      {{
        content: (
          <div>
            <h3>HomePage</h3>
          </div>
        ),
        text: "这是个文本", 
        btnClick: () => {
          console.log("btnClick");
        }
      }}
    </LayOut>
  );
}

export default App;