react组件通讯的基本使用props

目录

一 组件通讯介绍

二 函数组件通讯

三 类组件通讯  

---

一 组件通讯介绍

组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据.
为了实现多个组件之间共享数据,就需要打破组件的独立封闭性,让组件与外界沟通,这个过程就是组件通讯.
组件是封闭的,要接收外部数据通过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 不能改变名字

效果