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
  • 效果
  • 输出
相关推荐
gnip5 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫5 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel6 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼7 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手10 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法11 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku11 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode11 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu11 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu11 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript