javascript 反应上下文消费者组件

Posted 2021-05-03

const ToggleContext = React.createContext()

function ToggleConsumer(props) {
  return (
    <ToggleContext.Consumer {...props}>
      {context => {
        if (!context) {
          throw new Error(
            `Toggle compound components cannot be rendered outside the Toggle component`,
          )
        }
        return props.children(context)
      }}
    </ToggleContext.Consumer>
  )
}

<ToggleContext.Provider
  value={{on: this.state.on, toggle: this.toggle}}
>
  {this.props.children}
</ToggleContext.Provider>

<ToggleConsumer>
  {({on}) => (on ? children : null)}
</ToggleConsumer>