react-组件间的通讯

news/2025/2/15 22:55:13/

一、父传子

父组件在使用子组件时，提供要传递的数据
子组件通过props接收数据

class Parent extends React.Component {render() {return (<div><div>我是父组件</div><Child name="张" age={16} /></div>)}
}

const Child = props => {return (<div><div>我是子组件</div><div>从父组件接收来的数据： {props.name}-{props.age}</div></div>)
}

二、子传父

父组件在使用子组件时，提供一个回调函数，用于接收数据
子组件通过props调用回调函数，将要传递的数据作为参数传递给回调函数

class Parent extends React.Component {getChildMsg = (msg) => {console.log('从子组件接收来的数据：', msg)}render() {return (<div><div>我是父组件</div><Child getMsg={this.getChildMsg} /></div>)}
}

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 组件接受数据

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

代码

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><SubNodegetMsg={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><buttononClick={() => {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