React 组件通讯的三种方式

最新推荐文章于 2025-01-10 12:22:16 发布

原创最新推荐文章于 2025-01-10 12:22:16 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了React中父组件向子组件、子组件向父组件以及兄弟组件之间如何进行数据传递。通过属性(props)实现父传子，通过回调函数实现子传父，通过状态提升实现兄弟组件间通信。示例代码展示了具体的实现方式。

父传子，父组件在子组件 Child 标签上绑定一个属性，属性的值为需要传递的参数，子组件通过props获取父组件传递过来的值，如果子组件是类组件，那么，props 为 this.props

import React from 'react'
import ReactDOM from 'react-dom'

// 父组件
class Parent extends React.Component {
    state = {
        lastName: "wang"
    }

    render() {
        return (
            <div className="parent">
                父组件：
                 <Child name={this.state.lastName}></Child>
            </div>
        )
    }
}

// 子组件
const Child = (props) => {
    return (
        <div className="child">
            <p>子组件接收到父组件的数据：{props.name}</p>
        </div>
    )
}

ReactDOM.render(Parent, document.getElementById('root'))

子传父，父组件在子组件Child上绑定一个参数，参数值为一个回调函数，该回调函数需要一个形参（该形参就是子组件传递过来的参数）。子组件事件中使用 prors 调用父组件中定义好的回调函数，参数为需要传递的参数

import React from 'react'
import ReactDOM from 'react-dom'

// 父组件
class Parent extends React.Component {
    state = {
        parentMsg: ''
    }
    // 提供回调函数，用来接收数据
    getChildMsg = (data) => {
        console.log('接收到子组件中传递过来的数据：', data)
        this.setState({
            parentMsg: data
        })
    }

    render() {
        return (
            <div className="parent">
                 父组件：{this.state.parentMsg}
                 <Child getMsg={this.getChildMsg}></Child>
            </div>
        )
    }
}

// 子组件
class Child extends React.Component {
    state = {
        msg: "子组件的数据"
    }
    handleClick = () => {
        // 子组件调用父组件传递过来的回调函数
        this.props.getMsg(this.state.msg)
    }
    render() {
        return (
            <div className="child">
                子组件：<button onClick={this.handleClick}>点我，给父组件传递数据</button>
            </div>
        )
    }
}

ReactDOM.render(Parent, document.getElementById('root'))

兄弟组件之间通讯，将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态（状态提升），也就是把参数先传递给父组件，在由父组件传递给另外一个子组件

import React from 'react'
import ReactDOM from 'react-dom'

// 公共父组件
class Parent extends React.Component {
    // 提供共享状态
    state = {
        count: 0
    }

    // 提供修改共享状态的方法
    onIncrease = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <div>
                <Child1 count={this.state.count}/>
                <Child2 onIncrease={this.onIncrease}/>
            </div>
        )
    }
}

// 子组件1
const Child1 = (props) => {
    return (
        <h1>计数器：{props.count}</h1>
    )
}

// 子组件2
const Child2 = (props) => {
    return (
        <button onClick={() => props.onIncrease()}>点我+1</button>
    )
}

ReactDOM.Parent (Parent, document.getElementById('root'))