当前位置：首页 > news >正文

React——组件通讯

news 2025/8/5 3:20:50

组件通讯介绍

组件中的状态是私有的，组件的状态只能在组件内部使用，无法直接在组件外使用，但是我们在日常开发中，通常会把相似、功能完整的应用才分成组件（工厂模式）利于我们的开发，而不同组件直接又需要传递数据，而这个过程就是组件通讯。

组件通讯-父子间、兄弟间传值props

props，学过vue的其实我们都很熟悉，都是父组件传递给子组件的一种方式。

props 是只读对象，只能读取属性，无法修改，属于单向数据流。

根本作用：接收（其他组件）传递给当前组件的数据

如何传递

// 传递数据：给组件标签添加属性 用{}内部传入数据，数据类型依据输入决定
<New userName='hyy' id={'1233414'} />

函数组件接受，参数props直接接受

// 接收数据（函数组件）：
// props ：{ userName='hyy' id={'1233414'} }
function getProps(props) {return (<div><div>{props.userName}</div><div>{props.id}</div></div>)
}

Class组件接受，this.props接受

// 接收数据（类组件）：
// this.props ：{ userName='hyy' id={'1233414'} }
class New extends Component {render() {return (<div><div>{this.props.userName}</div><div>{this.props.id}</div></div>) }
}

组件通讯-父传子 props 代码示例

// 父组件传值
class Parent extends React.Component {state = { userName: 'hyy' }render() {return (<div><Child userName={this.state.userName} /></div>)}
}

// 子组件获取 函数组件
function Child(props) {return <div>{props.userName}</div>
}
// 子组件获取 类组件
class Child extends React.Component {render(){return <div>{this.props.userName}</div>}
}

组件通讯-子传父 props 代码示例

跟vue很像，通过props传递回调函数给子组件，子组件调用函数传递参数给父组件

// 声明一个回调函数，传递给子组件
class Parent extends React.Component {getChildData = (data) => {console.log('子组件数据传递的数据', data)}render() {return (<div><Child getData={this.getChildData} /></div>)}
}

// 子组件调用函数，通过传递参数传递给父组件
class Child extends React.Component {state = { childData: '子传父 props' }handleClick = () => {this.props.getData(this.state.childData)}return (<button onClick={this.handleClick}>传递数据给父元素</button>)
}

组件通讯-兄弟组件 props 代码示例

状态提升：将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

核心内容：把共同的父组件当中eventBus的数据处理中心

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Bor1 from './bor1'
import Bor2 from './bor2'
// 父组件
class App extends Component {state = {borData: '',}render() {// 给兄弟1传递改变方法，给兄弟2传递被改变的值return (<div<Bor1 change={this.changebor2Data}>兄弟组件1</Bor1> <Bor2 borData={this.state.borData}>兄弟组件2</Bor2></div>)}// 兄弟1传递给兄弟2 borData的修改方法changebor2Data = (borData) => {this.setState({borData,})}
}
ReactDOM.render(<App />, document.getElementById('root'))

// 兄弟组件1
import React, { Component } from 'react'export default class Bor1 extends Component {render() {return (<div><button onClick={this.change}>改变兄弟2的值</button></div>)}change = () => {this.props.changebor2Data('兄弟2值改变了')}
}

// 兄弟组件2
import React, { Component } from 'react'export default class Bor2 extends Component {render() {return (<div>{this.props.borData}</div>)}
}

组件通讯 - 跨级组件 Context（不常用，但是是redux的基础）

context实现跨级组件通讯

步骤：1、在最高级组件中创建一个context对象 createContext

2、用解构赋值解构出Provider，Consumer

3、利用Provider最外层应用，通过value=“data” ,提供共享的数据

data一般是个对象，传递state的值或者当前组件的方法

4、利用Consumer组件去接受共享的数据

{data =>接受组件的render内容}

import { createContext } from 'react'
const { Provider, Consumer } = createContext()// 通过Provider组件包裹，我们需要向child组件传递data
<Provider value="data"><div><Child /> </div>
</Provider>// child组件中使用 Consumer组件接收要共享的数据
<Consumer>{data => <span>{data}</span>}
</Consumer>