React - Context的简单使用

朴灿烈づ我的快乐病毒、 2022-04-15 05:07 209阅读 0赞

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

在一个典型的 React 应用中，数据是通过 props 属性由上向下（由父及子）的进行传递的，但这对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI主题），这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式，而不必通过组件树的每个层级显式地传递 props 。

举个栗子：

![20181121213351400.png][]

点击切换语言，下面俩个button会将英文转换成中文或者中文转换成英文。

我看如何实现的。

const cnText = {
      submit: '确认',
      cancel: '取消'
    }
    const enText = {
      submit: 'submit',
      cancel: 'cancel'
    }
    
    const LocaleContext = React.createContext(cnText);//创建一个Context 参数是默认值
    class ChangeButton extends React.Component{
          constructor (props) {
              super(props);
              this.state = {
                locale: cnText
              }
          }
          handle = () => {
              const locale = this.state.locale === enText ? cnText : enText;
              this.setState({
                locale
              })
          }
          render () {
            return (// value 里面为传个子组件的数据
            <LocaleContext.Provider value = { this.state.locale } >
                <button  onClick = { this.handle } >切换语言</button>
                <App />
            </LocaleContext.Provider>
            );
          }
    }
    class App extends React.Component {
      constructor (props) {
          super(props);
          this.state = enText;
    
        }
        render  () {
           return (
              <LocaleContext.Consumer >
                  { locale => (//locale 接受传过来的值，然后通过函数子组件渲染
                    <div>
                        <button> { locale.submit } </button>
                        <button> { locale.cancel } </button>
                    </div>
                  )}
              </LocaleContext.Consumer>
           );
         }
    }
    ReactDOM.render(
      <ChangeButton ></ChangeButton>,
      document.getElementById('root')
    )

当父组件的状态改变时，也就是通过handle函数，子组件会自动调用render重新渲染，不需要我们设置监听函数。

[Context][]

[20181121213351400.png]: /images/20220415/e24c725218d647538844fd740224beb6.png
[Context]: https://react.docschina.org/docs/context.html

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关 react -- context

目的：为使嵌套在较深层的组件方便获取最外层组件信息，如user、session、主题等全局性的数据。使用1： ![Image 1][] 2.stateless组件中的使

逃离我推掉我的手/ 2023年08月17日 16:20/ 0 赞/ 126 阅读

相关 React-context上下文

非父子之间的通信可以通过状态提升的方式来解决，但是当组件嵌套太深时就比较麻烦了，这时可以使用 react 中的上下文来解决（实际开发中使用状态管理工具 redux）通过 r

迈不过友情╰/ 2023年07月05日 13:09/ 0 赞/ 38 阅读

相关 React之Context

文章目录概念 API createContext 使用注意概念 `Context`可以让数据在组件树中自上而下自由传递，

落日映苍穹つ/ 2023年06月05日 15:54/ 0 赞/ 15 阅读

相关 React-Context(上下文)作用和使用

Ⅰ- 壹 - React-Context(上下文) 定义: Context提供了一种方式，能够让数据在组件树中传递，而不必一级一级手动传递。大概简述 1. 首

快来打我*/ 2022年12月13日 11:18/ 0 赞/ 152 阅读

相关 hadoop的Context简单使用

hadoop的Context简单使用作业输入： hadoop@hadoop:/home/hadoop/blb$ hdfs dfs -text

Love The Way You Lie/ 2022年07月28日 02:03/ 0 赞/ 141 阅读

相关 React - Context的简单使用

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。在一个典型的 React 应用中，数据是通过 props 属性由上向

朴灿烈づ我的快乐病毒、/ 2022年04月15日 05:07/ 0 赞/ 210 阅读

相关 React手稿 - Context

Context `Context`提供了除`props`之外的传参数的方式。 `Context`是全局跨组件传递数据的。 API React.create

青旅半醒/ 2022年04月03日 09:42/ 0 赞/ 205 阅读

相关 React 使用 Context

React建议不要使用Context 1. 绝大多数程序是不需要使用Context 2. 这是个实验性API;在未来的React版本中，可能会被更改.所以是不稳定的

r囧r小猫/ 2022年03月01日 14:22/ 0 赞/ 252 阅读

相关 React学习：context

实现主题切换一、定义2中不同主题 const themes = { light: { classnames: 'btn

我就是我/ 2022年02月19日 12:39/ 0 赞/ 220 阅读

相关 React的Context的使用方法简介

context 定义: Context提供了一种方式，能够让数据在组件树中传递，而不必一级一级手动传递。 API : createContext(defaultValue

╰+攻爆jí腚メ/ 2021年11月16日 12:02/ 0 赞/ 317 阅读