react context组件传值

最新推荐文章于 2025-05-24 03:15:12 发布

Boriska1996

最新推荐文章于 2025-05-24 03:15:12 发布

阅读量356

点赞数

CC 4.0 BY-SA版权

分类专栏： react JS 文章标签： react javascript

本文链接：https://blog.youkuaiyun.com/RequesToGod/article/details/108242576

JS 同时被 2 个专栏收录

15 篇文章

订阅专栏

react

5 篇文章

订阅专栏

本文深入讲解React Context API的使用方法，介绍如何通过Context组件进行跨层级的状态传递，以及父组件如何作为生产者向子孙组件提供数据。同时，文章提供了详细的代码示例，展示了Context API在实际项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react context组件传值

这种传值方法一般适用于多层传递父-------->子-------------->孙

思路：

不管后代怎么嵌套，后代都是消费者Consumer ，父组件都是生产者 Provider。后代的值都是从父组件中获取的，个人认为父组件有点类似于Vue中的VueX。表面是嵌套关系，但是获取到的值都是父组件的。

后代的组件需要放在

标签内部，不然会报错（详情可见：子组件第12行代码）。

关键点（很重要）

父组件导出生产者：

export const {Provider,Consumer} = React.createContext("默认名称");

所有的后代组件都是从父组件index中引入接收成为消费者

import { Consumer } from "../index";//引入父组件的Consumer容器

父组件 index.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import AA from './Sun/AA'
export const {Provider,Consumer} = React.createContext("默认名称");
export default class GH extends Component {
  constructor(){
    super();
    this.state={
      count:0,
    }
  }
  render() {
    let name ="dasdasdasdasdasdasw"
    return (
        //Provider共享容器 接收一个name属性
        <Provider value={name}>
            <div style={{border:'1px solid red',width:'30%',margin:'50px auto',textAlign:'center'}}>
                <p>父组件定义的值:{name}</p>
                <AA />
            </div>
        </Provider>
    );
}
  submitHandler = (data)=>{
    this.setState((nextState)=>{
      return {
        count:nextState.count+=data
      }
    })
  }
}


ReactDOM.render(
  <GH></GH>,
  document.getElementById('root')
);

子组件AA.js代码

import React, { Component } from 'react'
import { Consumer } from "../index";//引入父组件的Consumer容器
import BB from "./BB"
export default class AA extends Component {
    render() {
        return (
            <div>
        <Consumer>
        {
            (data)=><div>
               子组件 {data}
                <BB></BB>
            </div>
            
        }
        </Consumer>
            </div>
        )
    }
    clickHandler=()=>{
        console.log(this.props.op(2))
    }
}

孙子BB.js组件代码

import React, { Component } from 'react'
import { Consumer } from "../index";//引入父组件的Consumer容器
export default class BB extends Component {
    render() {
        return (
            <div>
                <Consumer>
                {( data) =>
                <div style={{ border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center' }}>
                    <p>孙组件。获取父组件的值:{data}</p>
               </div>
            }
                </Consumer>
            </div>
        )
    }
}