React——组件通讯

组件通讯介绍

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

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

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

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

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

如何传递

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

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

// 接收数据（函数组件）：
// props ：{ userName='hyy' id={'1233414'} }
function getProps(props) {
  return (
    <div>
      <div>{props.userName}</div>
      <div>{props.id}</div>
      </div>
  )
}
1
2
3
4
5
6
7
8
9
10

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>
    ) 
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

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

// 父组件传值
class Parent extends React.Component {
    state = { userName: 'hyy' }
    render() {
        return (
            <div>
               <Child userName={this.state.userName} />
            </div>
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11

// 子组件获取 函数组件
function Child(props) {
	return <div>{props.userName}</div>
}
// 子组件获取 类组件
class Child extends React.Component {
    render(){
        return <div>{this.props.userName}</div>
    }
}
1
2
3
4
5
6
7
8
9
10

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

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

// 声明一个回调函数，传递给子组件
class Parent extends React.Component {
    getChildData = (data) => {
        console.log('子组件数据传递的数据', data)
    }
    render() {
        return (
            <div>
            	<Child getData={this.getChildData} />
            </div>
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

组件通讯-兄弟组件 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 兄弟组件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值改变了')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 兄弟组件2
import React, { Component } from 'react'

export default class Bor2 extends Component {
  render() {
    return (
      <div>
       {this.props.borData}
      </div>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

组件通讯 - 跨级组件 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14