React之Context跨级组件传值

最新推荐文章于 2025-04-07 20:39:24 发布

原创最新推荐文章于 2025-04-07 20:39:24 发布 · 置顶 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

本文详细介绍了React中跨级组件传参的实现方法及好处，通过实例展示了如何使用Context API来解决复杂项目中组件间的数据传递问题。

React跨级传参

跨级组件传参的好处

例如：react-redux 的原理就是利用了跨级传参的方法实现的，其中的好处不言而喻!!!

为什么要用跨级传参

    在单纯的父子传参中this.props就可以了。子传父也是通过调用父组件的方法去改变参数变化,假如在企业项目中不
只是单纯的父子传参，还有爷爷组件和孙子组件或者重孙玄孙甚至可能...玄玄玄孙等等，就好比自己的亲戚的七大姑八
大姨一样错综复杂，所以这时候React提供了一个非常简便和实用的东西      ---------    组件跨级传值

具体使用方法

首先先下载下React脚手架，并搭建好目录结构
第一步在src文件夹下创建utils文件夹并创建context.js文件，以及其他组件
在context文件下书写一下代码(用来创建Context)

import React from 'react'

//创建context对象
var context = React.createContext();

//导出
export default context;

在App文件里书写爷爷组件App 并在爷爷组件中引入父亲组件List

class App extends Component{
    constructor(){
        super();
        this.state = {
            title:'支付宝'
        };
    }
    render(){
        return (
            <div className="app">
                {/* 通过value属性指定需要传递的值 */}
                {/* 希望接收值的组件 必须包裹在Provider内部 */}
                <Context.Provider value={this.state.title}>
                    <List></List>
                </Context.Provider>
            </div>
        )
    }
}

export default App;

在List文件里书写父亲组件List 并在爷爷组件中引入孙子组件Item

import React, { Component } from 'react'

import Item from './Item'

export default class List extends Component {
    render() {
        return (
            <div>
                <Item></Item>
            </div>
        )
    }
}

孙组件Item

import React, { Component } from 'react'
import Context from '../utils/context'
export default class Item extends Component {
    render() {
        return (
            <div className="item">
                <Context.Consumer>
                    {
                        (value) => {
                            console.log('Item接收到了值:', value);
                            /* 不能在这里用setState保存接收的value */
                            /* 否则会死循环 */
                            /* 对于接收到value,一般的处理方式: 立即渲染 */
                            return (
                                <h2>{value}</h2>
                            );
                        }
                    }
                </Context.Consumer>
            </div>
        )
    }
}

孙组件进行数据的展示和渲染

import React, { Component } from 'react'

import Context from '../utils/context'

export default class Btn extends Component {
    render() {
        return (
            <div className="btn">
                <Context.Consumer>
                    {
                        (value) => { 
                            console.log('Btn接收到了值:', value);
                            /* 不能在这里用setState保存接收的value */
                            /* 否则会死循环 */
                            /* 对于接收到value,一般的处理方式: 立即渲染 */
                            return (
                                <h2>{value}</h2>
                            );
                        }
                    }
                </Context.Consumer>
            </div>
        )
    }

这样就是实现了跨级传参

总结

创建context对象

var context = React.createContext();

传值的组件,利用 Provider 组件传值,值通过value属性指定;
注意：须将需要接收值的组件包裹在Provider内,这样所有内层组件都可以接收到这个value值，通俗的讲就是数据的入口。

<Context.Provider value={this.state.title}></Context.Provider>

接收值的组件,利用Consumer 组件接收值,内部是个函数

<Context.Consumer>  
 {
     (value) => {
        console.log('Btn接收到了值:', value);
         /* 不能在这里用setState保存接收的value */         
         /* 否则会死循环 */
         /* 对于接收到value,一般的处理方式: 立即渲染 */
         return (
             <h2>{value}</h2>
         );
     }
 }
</Context.Consumer>