React - Content

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

 

以下为实例：

一、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