react组件通讯的基本使用props

铃俐

已于 2022-07-17 20:55:41 修改

阅读量281

点赞数

分类专栏： react 文章标签： react 前端

于 2022-07-17 18:28:51 首次发布

本文链接：https://blog.csdn.net/m0_45877477/article/details/125834340

版权

react 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

本文介绍了React组件间的通讯方式，包括函数组件和类组件如何通过props传递数据。在函数组件中，通过props对象接收并显示传递的数据；而在类组件中，同样通过this.props获取并展示传递的属性值。组件通讯是React应用中实现数据流动的关键机制。

摘要由CSDN通过智能技术生成

一组件通讯介绍

二函数组件通讯

三类组件通讯

一组件通讯介绍

组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据.
为了实现多个组件之间共享数据,就需要打破组件的独立封闭性,让组件与外界沟通,这个过程就是组件通讯.
组件是封闭的,要接收外部数据通过props来实现.

二函数组件通讯

使用步骤
1 传递数据:给组件标签添加属性
2 接收数据:通过props接收数据

说明:<Hello>组件有2个属性 name和age ,这两个属性会组成一个对象props来进行传递

import React from "react";
import ReactDOM from "react-dom";

//2 接收数据
//props是一个对象
const Hello = props => {
    console.log(props)
    return (
        <div>
            <h1>name:{props.name}</h1>
            <h1>age:{props.age}</h1>
        </div>
    )
}

//1 传递数据
ReactDOM.render(<Hello name='妹妹' age='3'/>, document.getElementById("root"));

备注:可以把参数的名字修改成props以外的名字

效果

控制台

三类组件通讯

使用步骤
1 传递数据:给组件标签添加属性
2 接收数据:通过this.props接收数据

import React from "react";
import ReactDOM from "react-dom";

class Hello extends React.Component{
    render(){
        return (
            <div>
                {/*2 接收数据*/}
                <h1>name:{this.props.name}</h1>
                <h1>age:{this.props.age}</h1>
            </div>
        )
    }
}


//1 传递数据
ReactDOM.render(<Hello name='妹妹' age='3'/>, document.getElementById("root"));

备注:this.props 不能改变名字

效果