react-组件间的通讯

一、父传子

  • 父组件在使用子组件时,提供要传递的数据
  • 子组件通过props接收数据
javascript 复制代码
class Parent extends React.Component {
	render() {
		return (
			<div>
				<div>我是父组件</div>
				<Child name="张" age={16} />
			</div>
		)
	}
}
javascript 复制代码
const Child = props => {
	return (
		<div>
			<div>我是子组件</div>
			<div>
				从父组件接收来的数据: {props.name}-{props.age}
			</div>
		</div>
	)
}

二、子传父

  • 父组件在使用子组件时,提供一个回调函数,用于接收数据
  • 子组件通过props调用回调函数,将要传递的数据作为参数传递给回调函数
javascript 复制代码
class Parent extends React.Component {
    getChildMsg = (msg) => {
        console.log('从子组件接收来的数据:', msg)
    }
	render() {
		return (
			<div>
				<div>我是父组件</div>
				<Child getMsg={this.getChildMsg} />
			</div>
		)
	}
}
javascript 复制代码
const Child = props => {
    handleClick = (msg) => {
        this.props.getMsg('123abc')
    }
	return (
		<div>
			<div>我是子组件</div>
			<button onClick={this.handleClick}>
				点我,给父组件传递数据
			</button>
		</div>
	)
}

三、无关组件通讯

  • 调用 React.createContext() 创建 Provider 和 Consumer 两个组件
  • 使用Provider 组件作为父节点,设置value属性,表示要传递的数据
  • 调用Consumer 组件接受数据
javascript 复制代码
import React from 'react'
const { Provider, Consumer } = React.createContext()

class Parent extends React.Component {
	render() {
		return (
			<Provider value="red">
				<div>
					我是Parent 
					<Child />
				</div>
			</Provider>
		)
	}
}

const Child = props => {
	return (
		<div>
			我是Child
			<Grandson />
		</div>
	)
}


const Grandson= props => {
	return (
		<div>
			我是Grandson
			<Consumer>{data => 我是Parent接收来的数据: {data}}</Consumer>
		</div>
	)
}

export default Parent 

四、组件间的通讯demo

  • 代码
javascript 复制代码
import React from 'react'
import './index.css'

import PropTypes from 'prop-types'

/**
 * 组件间的通信demo
 */

// 创建context得到提供和消费两个组件,方便无关组件之间的通信
// Provider设置value属性,表示要传递的数据
// Consumer接收数据
const { Provider, Consumer } = React.createContext()

class Communication extends React.Component {
	render() {
		return (
			<Provider value="red">
				<div className="first">
					我是first
					<Node name="张" age={16} />
				</div>
			</Provider>
		)
	}
}

const Node = props => {
	return (
		<div className="second">
			<div>我是second-Node</div>
			<div>
				父组件first接收来的数据: {props.name}-{props.age}
			</div>
			<SubNode
				getMsg={msg => {
					console.log('second-Node接收到子组件third-SubNode数据:', msg)
				}}
			/>
		</div>
	)
}

// Node组件 添加props校验
Node.propTypes = {
	name: PropTypes.string.isRequired, // string类型,必填
	age: PropTypes.number, // number类型
}

// Node组件 添加props默认值
Node.defaultProps = {
	age: 18,
}

const SubNode = props => {
	return (
		<div className="third">
			<div>我是third-SubNode</div>
			<button
				onClick={() => {
					props.getMsg('三儿')
				}}>
				点我给父组件second-Node传值
			</button>
			<Child>我是子节点</Child>
		</div>
	)
}

const Child = props => {
	return (
		<div className="fourth">
			<div>我是fourth-Child</div>
			<Consumer>{data => <span>我是first接收来的数据: {data}</span>}</Consumer>
			<div>组件标签的子节点:{props.children}</div>
		</div>
	)
}

export default Communication
  • 效果
  • 输出
相关推荐
pobu1681 分钟前
aksk前端签名实现
java·前端·javascript
烛阴6 分钟前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw011 分钟前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦24 分钟前
VUE实现数字翻牌效果
前端·javascript·vue.js
Brilliant Nemo26 分钟前
集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged
javascript
嘉琪00129 分钟前
2025 js——面试题(7)——ajax相关
开发语言·javascript·ajax
南岸月明33 分钟前
我与技术无缘,只想副业搞钱
前端
liu_yueyang35 分钟前
JavaScript VMP (Virtual Machine Protection) 分析与调试
开发语言·javascript·ecmascript
gzzeason1 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky1 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web