react 跨組件傳遞參數

第一種:
import React, {Component, createContext, useContext} from 'react'
const Context = createContext()

function Middle () {
  return (
    <div>
      middle
      <Child />
    </div>
  )
}
function Child () {
  const Pro = useContext(Context)
  console.log(Pro)
  return (
    <div>
      return <div>child-{Pro.value}</div>
    </div>
  )
}
class Layout extends Component {
  state = {
    flags: 1,
    value: '666'
  }
  render () {
    console.log(this.state.value);
    return (
      
      <Context.Provider value={this.state}>
        <div>layout2</div>
        <Middle />
      </Context.Provider>
    )
  }
}

第二種:
import React, {Component, createContext} from 'react'
const {Provider, Consumer} = createContext()

function Middle () {
  return (
    <div>
      middle
      <Child />
    </div>
  )
}
function Child () {
  return (
    <div>
      <Consumer>
        {
          (context) => {
            return <div>child-{context.value}</div>
          }
        }
      </Consumer>
    </div>
  )
}
class Layout extends Component {
  state = {
    flags: 1,
    value: '666'
  }
  render () {
    console.log(this.state.value);
    return (
      
      <Provider value={this.state}>
        <div>layout2</div>
        <Middle />
      </Provider>
    )
  }
}