creteContext | 希曼日记

A要给C传递数据: 通过props: A -> B-> C 通过createContext: A -> C

思路:

在A组件中使用createContext的Pro对象传递数据
在C组件中使用createContext的Comser对象接受数据

示例:

import React, { createContext } from 'react'

const { Provider, Consumer } = createContext()

const CompC = () => {
 return (
   <Consumer>
    { (msg) => <span>{ msg }</span> }
   </Consumer>
 )}

const CompA = () => {

 return (<>
  <CompC></CompC>
 </>)
}


class App extends React.Component {
 state = {
  list: 'this is comp a',
 }

 render() {
  return (
    <Provider value={ this.state.list }>
     <CompA></CompA>
    </Provider>
  ) }
}

注意点: Consumer 组件能在{}插值外部添加内容, 必须在{}插值表达式书写JSX