react中的context,provider使用步骤

8 篇文章 0 订阅
5 篇文章 0 订阅

Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。

具体详见:context官方API

本篇文章只是详细的把我个人的学习日志给记录下来相当于又会了一个react相关的知识点,具体这些API可以参看官方API,已经写得很详细了;与context相关的API共有以下几个:

  • React.createContext

  • Context.Provider

  • Class.contextType

  • Context.Consumer

  • Context.displayName

如果想要在组件使用context,步骤具体如下:

1.首先设置context的初始值

// theme-context.ts中创建一个context,并设置初始值
import React from 'react'

export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
}

export const ThemeContext = React.createContext(
  themes.dark // 默认值
)

2.当点击button,切换theme,去动态改变context的value

//themed-button.tsx
import React from 'react'
import { ThemeContext } from './theme-context'

class ThemedButton extends React.Component {
  render() {
    const { props } = this
    const theme = this.context //调用context中设置的theme
    console.log(theme)
    return (
      <button
        {...props}
        style={{ backgroundColor: theme.background, width: '200px', height: '100px', cursor: 'pointer' }}
      />
    )
  }
}

//把上文创建的context与此组件关联,这样就可以在ThemeButton这个组件中通过this.context去调用设置的值了,
//这只是其中一种方式,也可以在ThemedButton这个组件内部,通过 static contextType = ThemeContext;来与此组件关联
ThemedButton.contextType = ThemeContext

export default ThemedButton

3.在app.js中去动态切换context

// app.tsx 去动态切换context
import { ThemeContext, themes } from './theme-context'
import ThemedButton from './themed-button'

function Page(props: any) {
  return props.children
}
function Section(props: any) {
  return props.children
}

// 一个使用 ThemedButton 的中间组件
function Toolbar(props) {
  return (
    <ThemedButton onClick={props.changeTheme}>
      Change Theme
    </ThemedButton>
  )
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      theme: themes.light,
    }
  }

  toggleTheme = () => {
    this.setState(state => ({
      theme:
        state.theme === themes.dark
          ? themes.light
          : themes.dark,
    }))
  }

  render() {
    // 在 ThemeProvider 内部的 ThemedButton 按钮组件使用 state 中的 theme 值,
    // 而外部的组件使用默认的 theme 值, 外部组件并不会发生变化,由此可见provider的作用了;
    return (
      <Page>
        <ThemeContext.Provider value={this.state.theme}>
          <Toolbar changeTheme={this.toggleTheme} />
        </ThemeContext.Provider>
        <Section>
          <ThemedButton />
        </Section>
      </Page>
    )
  }
}


//将此APP组件渲染到页面上
export default App

以上代码所实现的效果:

因为左边的按钮是被Provider所包裹的,右边的没有被包裹,看到这里是不是觉得很简单呢,以上就是应用context与Provider的实例了,小伙伴们若是有需要的话,可以照着做呀!
本次分享完毕!主要是参考了官方API,感谢官方所提供的例子!

 

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值