React组件通信

2024-01-30 15:57:10

通信方式：

父子组件之间
兄弟组件之间（变量提升）
跨组件层级

1，父子通讯

父组件通过自定义属性传递，子组件通过props接收：

父组件：

<子组件标签自定义属性1={值1} 自定义属性2={值2} .... />

子组件-函数式组件-接收数据

// 接收数据：函数组件需要通过补充形参来获取
function 子组件(props) {
console.log('从父组件中传入的自定义属性被收集在对象:', props)
return (<div>子组件的内容</div>)
}

子组件-类组件-接收数据

// 接收数据： class 组件需要通过 this.props 来获取
class 子组件 extends Component {
console.log('从父组件中传入的自定义属性被收集在对象:', this.props)
render() { return (<div>子组件的内容</div>) }
}

props的三个注意事项：

可以传递任意数据（数字，字符串，布尔类型，数组，对象，函数， jsx ）
只读的
单向数据流（父组件的数据更新会流动到子组件，不能反过来，子组件直接去修改父组件的数据 ）

children属性：不通过属性值传递，而是通过标签里的内容传递。

children属性：表示该组件的子节点，只要组件有子节点，props就有该属性
children 属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）

2，子传父：

父组件传值可以是任何对象，所以当父组件利用回调函数提供回调，子组件通过调用 this.props.函数名将数据作为参数传给父组件。

子组件：

父组件：

3，兄弟传值（状态提升）

a，什么是状态提升：

在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。

b，思路：

c，落地代码：

parent：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Jack from './Jack'
import Rose from './Rose'
class App extends Component {
  // 1. 状态提升到父组件
  state = {
    msg: '',
  }
  render() {
    return (
      <div>
        <h1>我是App组件</h1>
        <Jack say={this.changeMsg}></Jack>
        {/* 2. 把状态给子组件显示 */}
        <Rose msg={this.state.msg}></Rose>
      </div>
    )
  }
  changeMsg = (msg) => {
    this.setState({
      msg,
    })
  }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

Son1：

import React, { Component } from 'react'

export default class Jack extends Component {
  render() {
    return (
      <div>
        <h3>我是Jack组件</h3>
        <button onClick={this.say}>说</button>
      </div>
    )
  }
  say = () => {
    this.props.say('you jump i look')
  }
}

Son2：

import React, { Component } from 'react'

export default class Rose extends Component {
  render() {
    return (
      <div>
        <h3>我是Rose组件-{this.props.msg}</h3>
      </div>
    )
  }
}

码农公寓