在react中当父组件给孙组件传值时(使用context)

最新推荐文章于 2022-04-23 17:43:30 发布
最新推荐文章于 2022-04-23 17:43:30 发布
阅读量713 收藏 2
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shangsiqi1/article/details/103386598
版权

正常情况下父组件想孙组件传值:
父组件把值传给子组件,子组件把值传给孙组件
其实还是有另一种方法

在父组件中设置方法getChildContext

一.在父组件中定义方法


getChildContext(){
	return {
		color:this.state.color
	}
}

二.在父组件中设置数据类型

导包
import ReactTypes from 'prop-types'

设置数据类型
static childContextTypes={
	xxx:ReactTypes.
}

三.在孙组件中校验父组件传来的类型

导包
import ReactTypes from 'prop-types'

static contextTypes={
	xxx:ReactTypes.
}

而在组组件中获取值的时候通常都使用
this.context.xxx

S S Q
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
(精华2020年5月24日更新) react基础篇 父组件到孙组件跨级传参
一点一滴
05-24 1万+
新版：跨级传参最主要是避免每层赋值，也避免用到dva import React from 'react' const {Provider,Consumer} = React.createContext('default') export default class ContextDemo extends React.Component { state={ newContext:'createContext' } render() { const {newCon
react——父孙组件传递数据---1---（一层层传递）函数式组件传递数据
牟童的博客
08-14 496
import React, { Component } from 'react' function ProfilrHeader(props){ const {name,age}=props; return( <div> <h2>ProfilrHeader内容</h2> <h2>{name}____{age}</h2> </div> .
react的父组件与孙子组件之间的传值
liftWithSmile的博客
09-22 1584
关于react的父组件与孙子组件之间的传值–context 1.实现父组件和孙子组件之间传值需要有一个前提条件，需要在react项目中下载插件 prop-types，安装方法，我用的是，命令是npmnpm i prop-types 2.需要在父组件中定义方法：getChildContext（方法名固定）并且添加一个静态属性 childContextTypes来做类型校验 import React, { Component } from 'react' import PropTypes from 'prop-
关于react 循环问题,小白勿喷. 爷爷组件如何向孙子组件传值?
weixin_34221332的博客
05-22 723
关于react 循环问题,小白勿喷. 爷爷组件如何向孙子组件传值? 我新建了一个循环列表的组件.代码如下: import React, { Component } from 'react'; export default class PubContent extends Component { constructor(props) { super(props); } render() { ...
react 父组件传值子组件，子组件传值孙组件
jack_rose_me的博客
11-10 598
import React from 'react' import ReactTypes from 'prop-types' /* // 最外层的父组件 export default class Com1 extends React.Component { constructor(props) { super(props) this.state = { color: 'red' } } render() { return <div> .
Vue和React组件之间的传值方式详解
10-17
组件间的通信是构建复杂应用的关键，本文将详细介绍Vue和React组件之间如何传递值。 在Vue框架中，组件间传值主要有以下几种方式： 1. **父子组件通信**： - **父->子**：通过`props`属性将数据传递给子组件。父...
详解react组件通讯方式(多种)
10-15
本文将详细讲解React组件之间三种主要的通信方式：父组件向子组件传值、子组件向父组件传值以及跨级组件传值（包括使用Context API）。 1. 父组件向子组件传值 这是最基础的通信方式，通过props（属性）将数据从父...
React_native Navigator页面跳转组件参数传递
06-30
它允许你在不同的React组件之间进行平滑的过渡，同时支持在页面间传递数据。本篇将详细讲解如何利用`Navigator`进行页面跳转以及如何在跳转过程中传递参数。 一、安装和引入`Navigator` 首先，你需要安装`react-...
浅谈React Native 传参的几种方式(小结)
12-03
在React Native应用开发中，参数传递是不可或缺的一部分，特别是在页面之间和组件之间的交互。下面将详细探讨文中提到的React Native传参的几种常见方式。 首先，最常用且官方推荐的方法是利用`React Navigation`...
React_组件间传递参数、父—子、子—父、父—孙、兄弟
小歪博客
07-06 194
父—子 //父组件 class Main extends React.Component{ constructor(props){ super(); this.state = { age:50, } } render(){ return ( <div> {/* 传递参数age给子组件 */} <Check age={this.state.age} /> </div> ) } } //子组件 class Che
关于React的父子通信
RongKai_L的博客
04-23 1278
父组件向子组件传值，通过`props`，将父组件的`state`传递给了子组件。 父组件代码： ``` import React, { Component } from "react"; import Child from './Child' //引入子组件 export class App extends Component { //定义数据 state = { txt: '狒狒', } render () { return <div> //渲染子...
react 常用方法及父子 、兄弟传参等
艾米的猫儿的博客
04-08 343
第一条 父子传参（父传子） 1.父传子 1. 父组件向子组件传参 {...item} 表示把整个item参数对象都传过去了 change 是传递方法 <ListItem key={item.id} {...item} change={this.change}/> 2.子组件接收参数 const {name, doStatus, id} = this.props 2.子传父及孙传父 父组件向子组件传递方法 <Lists change={th...
React中的context
weixin_46264539的博客
05-18 119
React中的context 当我们写React时，我们总是通过改变State和传递Prop对view进行控制，有时时，也会遇到一点小麻烦。 但是随着我们的应用变的越来越复杂，组件嵌套也变的越来越深，有时甚至要从最外层将一个数据一直传递到最里层（比如当前user的信息）。 理论上，通过prop一层层传递下去当然是没问题的。不过这也太麻烦啦，要是能在最外层和最里层之间开一个穿越空间的虫洞就好了。 幸运的是，React的开发者也意识到这个问题，为我们开发出了这个空间穿越通道 —— Context。 假设我们有一
将孙子组件中的值传给父组件 - React
Clearlight's Blog
04-24 1608
需求分析 需求: 点击孙子组件, 将点击的父组件的index显示出来, 这时就要将父组件的index传给子组件,然后在传给孙子组件,这时通过点击对应的孙子组件,再将点击的孙子组件再通过子组件传给父组件 Father.js // 父亲组件 export default class Father extends Component{ constructor(props) { ...
[react] childContextTypes是什么？它有什么用？
歌谣的博客
11-10 477
[react] childContextTypes是什么？它有什么用？ childContextTypes用来定义context数据类型，该api从16.3开始已被废弃 使用方式 class MessageList extends React.Component { getChildContext() { return {color: "purple"}; } render() { return <div>MessageList</div>;
React之Context
沐唐风宋雨
10-28 246
组件间通信大致有以下三种情况： 父组件向子组件通信 子组件向父组件通信 跨级组件通信 父组件向子组件通信 这是最常见的一种通信方式，即父组件通过props向子组件传递需要的信息。 子组件向父组件通信 利用回调函数可以实现通信，即父组件将一个函数作为 props 传递给子组件，子组件调用该回调函数，便可以向父组件通信。 跨级组件通信 所谓跨级组件通信，就是父组件向子组件的子组件通信，向更深层的子...
React之使用context传递数据
潜行IT的博客
08-06 1118
react中当要从父组件给子孙组件传递数据时 如果用props传递　则需要一级一级传递　而如果用context时 则可以在父组件中加入getChildContext函数　并声明需要传递的数据　在需要接受到数据的组件中声明变量类型Test.contextTypes = {test : PropTypes.string}　 Example: //父组件 import React, { Compo...
React之context上下文详解
astonishqft的博客
09-27 1167
React的context介绍React的context介绍简介用法总结 React的context介绍 简介 首先介绍下React中context这个概念，React官方文档上是这么介绍的： Context provides a way to pass data through the component tree without having to pass props down manua...
React Context上下文
weixin_38166557的博客
02-22 116
目录 前言 一 context旧版使用步骤 1.1 根组件childContextTypes属性 1.2 根组件getChildContext方法 1.3 子组件contextTypes静态属性 1.4 下文改变context的值，通过context的函数去改变根组...
React函数组件 怎么子组件给父组件传值
最新发布
03-20
当子组件需要向父组件传值时，可以调用父组件传递的函数，并将需要传递的值作为参数传入。 2. 使用回调函数：父组件可以定义一个回调函数，并将该函数作为props传递给子组件。子组件可以在需要传值的时候调用该回调...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值