React的context传值方法介绍

简介: 1.在src在创建一个context.js文件

一.函数组件context传值方法

1.在src在创建一个context.js文件

fcacbc94c70245dc810edc4f7816c58c.png

2.在context.js文件写如下代码

import React from 'react'
const MyContent = React.createContext()
export default MyContent

3.父组件

import React from 'react'
import MyContent from '../context'
import Head from "./Head"
export default function index() {
  return (
    <div>
      <MyContent.Provider value="张三">//要传递的值
        <Head />
      </MyContent.Provider>
    </div>
  )
}

4.子组件

import React,{ useContext } from 'react'
import MyContent from '../context'
export default function Head() {
    const name = useContext(MyContent)//使用usecontext接收
    return (
        <div>
            {name}
        </div>
    )
}

二.类组件context传值方法

1.在src在创建一个context.js文件

fcacbc94c70245dc810edc4f7816c58c.png

2.在context.js文件写如下代码

import React from 'react'
const MyContent = React.createContext()
export default MyContent

3.父组件

import React, { Component } from 'react'
import Head from './Head'
import MyContent from '../context'
export default class index extends Component {
  render() {
    return (
      <div>
        <MyContent.Provider value="张三">
          <Head></Head>
        </MyContent.Provider>
      </div>
    )
  }
}

4.子组件

import React, { Component } from 'react'
import MyContent from '../context'
export default class Head extends Component {
    static contextType = MyContent
    render() {
        //导入创建的context 并使用静态类方法contextType接收
        console.log(this.context);//张三        
        return (
            <div>
            </div>
        )
    }
}

三.Consumer 函数组件,类组件都可以

类组件

1.前两步跟上面一样,创建一个context.js文件,并写下上面的代码

2.父组件

import React, { Component } from 'react'
import Head from './Head'
import MyContent from '../context'
export default class index extends Component {
  render() {
    return (
      <div>
        <MyContent.Provider value="张三">
          <Head></Head>
        </MyContent.Provider>
      </div>
    )
  }
}

3.子组件

import React, { Component } from 'react'
import MyContent from '../context'
export default class Head extends Component {
    render() {
        return (
            <div>
                <MyContent.Consumer>
                    {name => { return <p>函数组件中的name: {name}</p> }}
                </MyContent.Consumer>
            </div>
        )
    }
}

函数组件

1.前两步跟上面一样,创建一个context.js文件,并写下上面的代码

2.父组件

import React from 'react'
import MyContent from '../context'
import Head from "./Head"
export default function index() {
  return (
    <div>
      <MyContent.Provider value="张三">
        <Head />
      </MyContent.Provider>
    </div>
  )
}

3.子组件

import React,{ useContext } from 'react'
import MyContent from '../context'
export default function Head() {
    return (
        <div>
            <MyContent.Consumer>
                {name => { return <p>函数组件中的name: {name}</p> }}
            </MyContent.Consumer>
        </div>
    )
}


相关文章
|
2月前
|
JavaScript 前端开发 API
[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式
[译] 用 Vue 3 Composition API 实现 React Context/Provider 模式
|
17天前
|
前端开发
React属性之context属性
React中的Context属性用于跨组件传递数据,通过Provider和Consumer组件实现数据的提供和消费。
29 3
|
23天前
|
前端开发 JavaScript 开发者
请详细介绍React挂载阶段的方法。
请详细介绍React挂载阶段的方法。
40 9
|
15天前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
43 0
|
2月前
|
前端开发 JavaScript
React 组件生命周期方法详解
【8月更文挑战第30天】
39 5
|
2月前
|
开发者 安全 UED
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
24 0
|
2月前
|
开发者
告别繁琐代码,JSF标签库带你走进高效开发的新时代!
【8月更文挑战第31天】JSF(JavaServer Faces)标准标签库为页面开发提供了大量组件标签,如`&lt;h:inputText&gt;`、`&lt;h:dataTable&gt;`等,简化代码、提升效率并确保稳定性。本文通过示例展示如何使用这些标签实现常见功能,如创建登录表单和展示数据列表,帮助开发者更高效地进行Web应用开发。
33 0
|
2月前
|
容器 Kubernetes Docker
云原生JSF:在Kubernetes的星辰大海中,让JSF应用乘风破浪!
【8月更文挑战第31天】在本指南中,您将学会如何在Kubernetes上部署JavaServer Faces (JSF)应用,享受容器化带来的灵活性与可扩展性。文章详细介绍了从构建Docker镜像到配置Kubernetes部署全流程,涵盖Dockerfile编写、Kubernetes资源配置及应用验证。通过这些步骤,您的JSF应用将充分利用Kubernetes的优势,实现自动化管理和高效运行,开启Java Web开发的新篇章。
47 0
|
2月前
|
前端开发 JavaScript API
掌握React表单管理的高级技巧:探索Hooks和Context API如何协同工作以简化状态管理与组件通信
【8月更文挑战第31天】在React中管理复杂的表单状态曾是一大挑战,传统上我们可能会依赖如Redux等状态管理库。然而,React Hooks和Context API的引入提供了一种更简洁高效的解决方案。本文将详细介绍如何利用Hooks和Context API来优化React应用中的表单状态管理,通过自定义Hook `useForm` 和 `FormContext` 实现状态的轻松共享与更新,使代码更清晰且易于维护,为开发者带来更高效的开发体验。
34 0
|
2月前
|
前端开发 API 开发者
【React状态管理新思路】Context API入门:从零开始摆脱props钻孔的优雅之道,全面解析与实战案例分享!
【8月更文挑战第31天】React 的 Context API 有效解决了多级组件间状态传递的 &quot;props 钻孔&quot; 问题,使代码更简洁、易维护。本文通过电子商务网站登录状态管理案例,详细介绍了 Context API 的使用方法,包括创建、提供及消费 Context,以及处理多个 Context 的场景,适合各水平开发者学习与应用,提高开发效率和代码质量。
27 0

热门文章

最新文章