React跨组件通信

在React中，可以通过父子通信或者context来实现跨组件通信。

父子通信实现跨组件通信

实现原理：App组件先将数据传递给Father，然后Father组件将接收到的数据传递给Son组件。

App.js

import React, {
      Component } from "react";

// 定义组件App
export default class App extends Component {
     
	constructor(props) {
     
		super();
		this.state = {
     
			name: "zhangsan",
			age: 18,
		};
  }

	render() {
     
		return (
			<div>
				<Father name={
     this.state.name} age={
     this.state.age}></Father>
			</div>
		);
	}
}

// 定义Father组件
function Father(props) {
     
	return (
		<div>
			<Son name={
     props.name} age={
     props.age}></Son>
		</div>
	);
}

// 定义Son组件
function Son(props) {
     
	return (
		<div>
			我的名字是:{
     props.name}
			我的年龄是:{
     props.age}
		</div>
	);
}

context实现跨组件通信

App.js

import React, {
      Component } from "react";
import Father from "./Father";
import {
     UserContext} from './user-content/index'

export default class App extends Component {
     
	constructor(props) {
     
		super(props);

		this.state = {
     
			name: "xiaoming",
			age: 18,
		};
  }
  
	render() {
     
		return (
			<div>
				<UserContext.Provider value={
     this.state}>
					<Father></Father>
				</UserContext.Provider>
			</div>
		);
	}
}

user-content/index.js

import {
     createContext} from 'react' 

// 创建content对象,并设置默认值
export const UserContext = createContext({
     
  name:'zhangsan',
  age:10
})

Father.js

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

export default class Father extends Component {
     
  render() {
     
    return (
      <div>
        {
     /* 类子组件 */}
        <Son></Son>
      </div>
    )
  }
}

Son.js

import React, {
      Component } from "react";
import {
      UserContext } from "./user-content";

export default class Son extends Component {
     
	render() {
     
		const {
      name, age } = this.context;
		return (
			<div>
				<h2>名字是:{
     name}</h2>
				<h2>年纪是:{
     age}</h2>
			</div>
		);
	}
}

Son.contextType = UserContext;