react组件跨级通信

组件跨级通信

组件关系

app ==> A ==> B

app ==> A ==> D

需求：将app中的数据传递到后代组件B中

// contentManage.js

import { createContext } from 'react';

export const AppContent = createContext(null)

//app.js
import React from "react";
import A from "./components/A";
import { AppContent } from "./components/ContentManage";
const { Provider } = AppContent;
class App extends React.Component {
  state = {
    name: "aaa",
    age: 18,
  };

  render() {
    return (
      <div
        style={{ height: "600px", padding: "10px", backgroundColor: "pink" }}
      >
        <h1>App</h1>
        <Provider value={this.state}>
          <A></A>
        </Provider>
      </div>
    );
  }
}

export default App;

// A.jsx

import React, { Component } from 'react'
import B from './B'

export default class A extends Component {
  render() {
    return (
      <div style={{height:'400px', backgroundColor: 'yellowgreen',padding:'30px'}}>
        <h2>a组件</h2>
        <B></B>
      </div>
    )
  }
}

// C.jsx

import React, { Component } from 'react'
import {AppContent} from './ContentManage'

export default class B extends Component {
  static contextType = AppContent
  render() {
    const {name,age} = this.context
    return (
      <div style={{backgroundColor:'white',height:'300px',padding:'10px'}}>
        <h2>B组件</h2>
        <h2>{name}</h2>
        <h2>{age}</h2>
      </div>
    )
  }
}

//D.jsx

import React from 'react'
import {AppContent} from './ContentManage'
const { Consumer } = AppContent

export default function D() {
  return (
    <div>
      <h1>函数式组件</h1>
    <Consumer>
      {
        value => value.name + value.age
      }
    </Consumer>
    </div>
  )
}