React 之React.createContext

最新推荐文章于 2026-05-16 16:05:54 发布

原创最新推荐文章于 2026-05-16 16:05:54 发布 · 563 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react

react 专栏收录该内容

1 篇文章

订阅专栏

这篇博客通过实例展示了如何使用 React 的 Context API 进行数据传递，避免手动逐层传递 props。首先引入 createContext 创建 Context，然后在组件树中使用 Provider 包裹并设置 value 属性传递值，Consumer 组件则用于消费这些值。文中详细解释了 Context 的使用场景和方法。

Context方法的官方文档地址：https://react.docschina.org/docs/context.html#when-to-use-context

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

话不多说，直接贴码！！！


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<div id="example"></div>
<script type="text/babel">

const ThemeContext = React.createContext()

function Parent(props) {
    return(
        <div>
            <Child></Child>
        </div>
    )
}

function Child(props) {
    return(
        <ThemeContext.Consumer>
            {
            myValue => {return (<h1>myValue : {myValue}</h1>)}
            }
        </ThemeContext.Consumer>
    )
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state={
        value: 60
    }
  }

  componentDidMount(){
  }

  render() {
      const {value} = this.state
        return ( 
            <ThemeContext.Provider value={value}>
                <button
                    type="button"
                    onClick={() => this.setState({ value: value - 1 })}
                    >
                    减减
                    </button>  
                <Parent />
            </ThemeContext.Provider>
        )
  }
}

ReactDOM.render(
    <MyComponent />,
    document.getElementById('example')
);

</script>
</html>

使用方法：

首先引入createContext，然后创建Content


// 首先引入createContent
import React, { Component, createContext } from 'react';

// 然后创建Content
const ThemeContext = React.createContext()

创建完毕之后，包裹在需要传值的组件外层，注意要使用创建的Context+‘.Provider’作为标签名，然后添加value属性，也就是实参，

孙组建取值，在需要获取的组建外层用创建的Context+‘.Consumer’作为标签名，然后在内部的{}中写方法，方法中的参数就是你的形参。