本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一 组件通讯介绍

• 组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据.

• 为了实现多个组件之间共享数据,就需要打破组件的独立封闭性,让组件与外界沟通,这个过程就是组件通讯.

• 组件是封闭的,要接收外部数据通过props来实现.

二 组件通讯使用

1 函数组件通讯

使用步骤

1 定义一个模板:组件里由props对象的属性值占位

2 给模板设置具体的值:给组件标签添加属性

代码

import React from "react";
import ReactDOM from "react-dom";
 
//1 定义一个模板:组件里由props对象的属性值占位
//props是一个对象
const Hello = props => {
    console.log(props)
    return (
        <div>
            <h1>name:{props.name}</h1>
            <h1>age:{props.age}</h1>
        </div>
    )
}
 
//2 给模板设置具体的值:给组件标签添加属性
ReactDOM.render(<Hello name='妹妹' age='3'/>, document.getElementById("root"));

说明

• Hello组件的两个h1标签的内容就相当于一个模板,内容使用了props.name和props.age的占位

• Hello组件有2个属性 name和age ,这两个属性会组成一个对象props来进行数据传递,最终数据会展示在模板里

效果

控制台

2 类组件通讯

import React from "react";
import ReactDOM from "react-dom";
 
class Hello extends React.Component{
    render(){
        return (
            <div>
                <h1>name:{this.props.name}</h1>
                <h1>age:{this.props.age}</h1>
            </div>
        )
    }
}
 
 
ReactDOM.render(<Hello name='妹妹' age='3'/>, document.getElementById("root"));

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

效果

三 props的特点

1 传递数据时,可以传递任意类型的数据

比如传递字符串、数字、数组、函数、JSL表达式

字符串: 属性加引号表示传递的是字符串类型
数字: {数字}表示传递的是数字类型
数组: {[]}可以传递数组
函数: {()=>{}}
JSL表达式: {<p>这是jsl表达式</p>}

代码

import React from "react";
import ReactDOM from "react-dom";
 
class Hello extends React.Component {
   
    render() {
        console.log(this.props)
        //调用函数
        this.props.fn();
        //解构数组:其他名字
        const [name1,name2,name3]=this.props.nameOther
        return (
            <div>
                <h1>name:{this.props.name}</h1>
                <h1>age:{this.props.age}</h1>
                <h1>其他名字:{name1},{name2},{name3}</h1>
                {this.props.tag}
            </div>
        )
    }
}
 
 
ReactDOM.render(<Hello
    name='妹妹'
    age={3}
    nameOther={["小糯米", "小狗狗", "婵妹妹"]}
    fn={()=> console.log("这是一个函数")}
    tag={<p>这是jsl表达式</p>}
/>, document.getElementById("root"));

效果

 控制台

2 props是只读的对象,不能修改传过来对象的属性值

尝试修改props的name属性的值

控制台报错如下

3 使用类组件时,如果写了构造函数,应该将props传递给super()

否则无法在构造函数中获取到props

将props传递给构造函数的super()