一、Parent.js 父组件

import React, { Component } from 'react';
import { Text, StyleSheet, View } from "react-native";
import Son from './son'export const { Provider, Consumer } = React.createContext('默认值');
class Parent extends Component {render() {const value = '父组件';return (<View style={styles.container}><Provider value={value}><View><Text>父组件的定义的值为：{value}</Text><Son /></View></Provider>{/*只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。此默认值有助于在不使用 Provider 包装组件的情况下对组件进行测试。注意：将 undefined 传递给 Provider 的 value 时，消费组件的 defaultValue 不会生效。*/}<View style={{ marginTop: 40 }}><Text>不使用Provider显示默认值：</Text><Text style={{ marginTop: 10 }}>父组件的定义的值为：{value}</Text><Son /></View></View>)}
}export default Parent;const styles = StyleSheet.create({container: {marginTop: 60,alignItems: "center",justifyContent: "center",},
})

二、Son.js 子组件

import React, { Component } from 'react';
import { Text, StyleSheet, View } from "react-native";
import { Consumer } from './parent';    // 引入父组件的 Consumer 容器
import Grandson from './grandson';class Son extends Component {render() {return (<View style={styles.container}>{/* Consumer容器,可以拿到上文传递下来的value属性,并可以展示对应的值 */}<Consumer>{(value) =><View><Text>子组件，获取到的父组件的值：{value}</Text><Grandson /></View>}</Consumer></View>)}
}export default Son;const styles = StyleSheet.create({container: {marginTop: 10,},
})

三、Grandson.js 孙组件

import React, { Component } from 'react';
import { Text, StyleSheet, View } from "react-native";
import { Consumer } from './parent'class Grandson extends Component {render() {return (<View style={styles.container}><Consumer>{(value) =><View><Text>孙组件，获取到的父组件的值为：{value}</Text></View>}</Consumer></View>)}
}export default Grandson;const styles = StyleSheet.create({container: {marginTop: 10,},
})

四、显示结果：

这是使用Provider

不使用Provider，显示默认值

简单案例，详情请参考官网：

https://zh-hans.reactjs.org/docs/context.html

React - Content相关推荐

React 深入系列３：Props 和 State
文:徐超,<React进阶之路>作者授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...
60+ 实用 React 工具库，助力你高效开发！
大家好,我是若川.持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
[转] 深入理解React 组件状态（State）
React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...
react 最佳实践_最佳React教程
react 最佳实践 React is a JavaScript library for building user interfaces. It was voted the most loved i ...
2021 react学习资料
一.create-react-app 全局安装create-react-app $ npm install -g create-react-app 创建一个项目 $ create-react-app ...
react基础知识2
1. 事件处理 React 事件的命名采用小驼峰式(camelCase),而不是纯小写. 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串. 在react的事件处理程序中,内部 ...
React学习：状态(State) 和属性(Props)
React :元素构成组件,组件又构成应用. React核心思想是组件化,其中组件通过属性(props) 和状态(state)传递数据. State 与 Props 区别 props 是组件对外 ...
我用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！
作者:Chimezie Enyinnaya 译者:前端小智来源:blog 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github. ...
react antd confirm content list_React造轮系列：对话框组件 - Dialog 思路
React造轮系列:对话框组件 - Dialog 思路对话框一般是我们点击按钮弹出的这么一个东西,主要类型有 Alter, Confirm 及 Modal, Modal 一般带有半透明的黑色背景.当 ...

React - Content

一、Parent.js 父组件

二、Son.js 子组件

三、Grandson.js 孙组件

四、显示结果：

React - Content相关推荐

最新文章

热门文章