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 context = createContext()
function Middle () {
  return (
    <div>
      middle
      <Child />
    </div>
  )
}
class Child extends Component {
  static contextType = context;
  render () {
    
    return (
      <div>
        return <div>child-{this.context.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>
    )
  }
}
 

 

 
posted @ 2021-03-29 11:44  异地大光码  阅读(287)  评论(0编辑  收藏  举报