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;