深入理解React - Props

import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'
// 导入prop-types
import PropTypes from 'prop-types'
import { nanoid } from 'nanoid'
import Husband from './components/Husband'
import Wife from './components/Wife'
 
const root = ReactDOM.createRoot(document.getElementById('root'))
 
class Child extends React.Component {
  render() {
    const { children } = this.props
    const res = children()
    return (
      <>
        <div>{res}</div>
      </>
    )
  }
}
class App01 extends React.Component {
  render() {
    return (
      <Child>
        {() => {
          return (
            <>
              <div>
                <h1>we are the world!</h1>
              </div>
            </>
          )
        }}
      </Child>
    )
  }
}
 
class Header extends React.Component {
  render() {
    return (
      <>
        <div>
          <h1></h1>
        </div>
      </>
    )
  }
}
 
// 形参可以给组件传入默认值
function HeaderCom({ name = 'we are the world' }) {
  return (
    <>
      <div>
        <h1>{name}</h1>
      </div>
    </>
  )
}
 
HeaderCom.protoTypes = {
  name: PropTypes.string.isRequired,
}
// 设置组件的propTypes属性
Header.propTypes = {
  // 设置props属性的类型
  list: PropTypes.array.isRequired,
  name: PropTypes.string,
  // 🍧 element是JSX
  title: PropTypes.element,
 
  obj: PropTypes.shape({
    age: PropTypes.number,
    gender: PropTypes.string,
  }),
}
 
class App02 extends React.Component {
  render() {
    return (
      <>
        <div>
          <HeaderCom name={'Felix'} />
          <hr />
          <Header
            obj={{ age: '24' }}
            list={[]}
            name={'wangzz'}
            title={<h1>Hello React</h1>}
          ></Header>
        </div>
      </>
    )
  }
}
 
const divNode = (
  <div>
    <App02 />
  </div>
)
root.render(divNode)