How should the App component in React pass data to the Child component?

Context provides a way to pass data between component trees without manually adding props for each layer of components. (Excerpted from the official websiteContext – React)

Function:Transfer data across components (for example: theme, UI theme, language, etc.)

Simple demo usage steps:

1. Call React.createContext() to create two components: Provider (provide data) and Consumer (consume data).

const { Provider, Consumer } = React.createContext();

1. Use Provider component as parent node.

 <Provider >
        <div className='app'>
          <Node />
        </div>
 </Provider>

1. Set the value attribute to represent the data to be passed.

 <Provider value="blue">
      ...
  </Provider>

1. 1. Call the Consumer component to receive data

 <div className='child'>
      <Consumer>
        {
          data => <span>我是子节点11{data}</span>
        }
      </Consumer>
    </div>

Complete code:

/**
 * Context 跨组件实现通信
 */
import React, { Component } from 'react'
const { Provider, Consumer } = React.createContext();
export default class App extends Component {
  render() {
    return (
      <Provider value="blue">
        <div className='app'>
          <Node />
        </div>
      </Provider>
    )
  }
}
const Node = props => {
  return (
    <div className='node'>
      <SubNode />
    </div>
  )
}
const SubNode = props => {
  return (
    <div className='subnode'>
      <Child />
    </div>
  )
}
const Child = props => {
  return (
    <div className='child'>
      <Consumer>
        {
          data => <span>我是子节点11{data}</span>
        }
      </Consumer>
    </div>
  )
}

Summarize:

1. If two components are distant relatives (for example, nested multiple levels), you can use Context to implement component communication

2. Context provides two components: Provider and Consumer

3. Using context, we can avoid passing props through intermediate elements:

4. Provider component: used toprovide data

5. Consumer component: used toconsume data