react的context和props详解

const { Provider, Consumer } = React.createContext()

<Provider>
  <div className="App">
    <Child1 />
  </div>
</Provider>

<Provider value="pink">

<Consumer>
  {data => <span>data参数表示接收到的数据 -- {data}</span>}
</Consumer>

function Hello(props) {
  return (
    <div>
      组件的子节点：{props.children}
    </div>
  )
}
<Hello>我是子节点</Hello>

// 创建的组件
function App(props) {
  const arr = props.colors
  const list = arr.map((item, index) => <li key={index}>{item}</li>)
  return (
    <ul>{list}</ul>
  )
}
// 使用组件时
<App colors={19} />

import PropTypes from 'prop-types'
function App(props) {
  return (
    <h1>Hi, {props.colors}</h1>
  )
}
App.propTypes = {
  // 约定colors属性为array类型
  // 如果类型不对，则报出明确错误，便于分析错误原因
  colors: PropTypes.array
}

// 常见类型
optionalFunc: PropTypes.func,
// 必选
requiredFunc: PropTypes.func.isRequired,
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
})

function App(props) {
  return (
    <div>
      此处展示props的默认值：{props.pageSize}
    </div>
  )
}
// 设置默认值
App.defaultProps = {
  pageSize: 10
}
// 不传入pageSize属性
<App />