React——组件通讯(不完整版)
组件通讯介绍
组件中的状态是私有的,组件的状态只能在组件内部使用,无法直接在组件外使用,但是我们在日常开发中,通常会把相似、功能完整的应用才分成组件(工厂模式)利于我们的开发,而不同组件直接又需要传递数据,而这个过程就是组件通讯。
组件通讯-父子间、兄弟间传值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>