当前位置：首页 > article >正文

REACT--组件通信

article 2025/2/24 3:06:43

组件之间如何进行通信？

组件通信

组件的通信主要借助props传递值

分为整体接收、解构接收

整体接收

import PropTypes from 'prop-types';

//子组件
function Welcome(props){
    return (
        <div>
            hello Welcome,{props.count},{props.msg}
        </div>
    )
}

// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
    // 验证 count 属性为字符串类型
    count: PropTypes.string,
    // 验证 msg 属性为字符串类型
    msg: PropTypes.string
};

// 父组件
function App(){
    return (
        <div>
            hello App
            <Welcome count="123" msg="hi react"/>
        </div>
    )
}

export default App

解构接收

import PropTypes from 'prop-types';

//子组件
function Welcome({count,msg}){
    return (
        <div>
            hello Welcome,{count},{msg}
        </div>
    )
}

// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
    // 验证 count 属性为字符串类型
    count: PropTypes.string,
    // 验证 msg 属性为字符串类型
    msg: PropTypes.string
};

// 父组件
function App(){
    return (
        <div>
            hello App
            <Welcome count="123" msg="hi react"/>
        </div>
    )
}

export default App

传递属性但是不传值，实际传的是true

点击事件：

import PropTypes from 'prop-types';

//子组件
function Welcome({onClick,getData}){
    getData('我是子组件的数据')
    return (
        <div onClick={onClick}>
            hello Welcome
        </div>
    )
}

// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
    // 验证 onClick 属性为函数类型
    onClick: PropTypes.func.isRequired,
    // 验证 getData 属性为函数类型
    getData: PropTypes.func.isRequired
};

// 父组件
function App(){
    const handleClick =()=>{
        console.log(1234)
    }
    const getData = (data)=>{
        console.log(data)
    }
    return (
        <div>
            hello App
            <Welcome onClick={handleClick} getData={getData}/>
        </div>
    )
}

export default App

组件内容如何组合到一起

主要是通过props的children属性，传递多组内容只要是大括号可以接收的都可以进行传递，比如样式

通信的数据如何添加默认值和限定类型

通信数据添加默认值：

import PropTypes from 'prop-types';

function Welcome({count,msg}){
    return (
        <div>
            hello Welcome,{count},{msg}
        </div>
    )
}

// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
    // 验证 count 属性为数字类型
    count: PropTypes.number,
    // 验证 msg 属性为字符串类型
    msg: PropTypes.string
};

// 为 Welcome 组件的属性设置默认值
Welcome.defaultProps = {
    count: 0,
    msg: 'default content'
};

function App(){
    return (
        <div>
            hello App
            <Welcome count={123} msg="hello react"/>
            <Welcome count={123}/>
        </div>
    )
}

export default App

这样也可以：

import PropTypes from 'prop-types';

function Welcome({count=0,msg='default'}){
    return (
        <div>
            hello Welcome,{count},{msg}
        </div>
    )
}

// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
    // 验证 count 属性为数字类型
    count: PropTypes.number,
    // 验证 msg 属性为字符串类型
    msg: PropTypes.string
};

function App(){
    return (
        <div>
            hello App
            <Welcome count={123} msg="hello react"/>
            <Welcome count={123}/>
        </div>
    )
}

export default App

怎么限定类型捏？

很简单，就是使用Protypes

我的版本高格式检测严格都不允许不添加这个勒：

// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
    // 验证 count 属性为数字类型
    count: PropTypes.number,
    // 验证 msg 属性为字符串类型
    msg: PropTypes.string
};

不添加这个则会强制的报错

想要限定多种类型的话可以这样做：

import PropTypes from 'prop-types';

function Welcome({count=0,msg='default'}){
    return (
        <div>
            hello Welcome,{count},{msg}
        </div>
    )
}

// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {
    // 验证 count 属性为数字类型
    count: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
    ]),
    // 验证 msg 属性为字符串类型
    msg: PropTypes.string
};

function App(){
    return (
        <div>
            hello App
            <Welcome count={123} msg="hello react"/>
            <Welcome count={123}/>
        </div>
    )
}

export default App

组件需要是纯函数

什么是纯函数？

纯函数只负责自己的任务，他不会更改该函数调用前就已经存在的对象或者变量

输入相同，则输出相同，给定相同的输入，纯函数应该总是返回相同的结果，使用严格模式检测不纯的计算

function App({msg}){
    let count = 0
    count ++
    console.log(count)
    return (
        <div>
            hello App,{msg}
        </div>
    )
}

export default App

// 不纯函数
// let bar = 1
// function foo(){
//     bar++
// }
// foo()

组件的状态和useState函数

瞬间变化的数据被称为状态（state），状态可以进行数据驱动视图，普通变量不行

useState可创建状态和修改状态的方法

状态如何改变视图

为什么普通变量不能呢？是因为无法重新渲染jsx

state状态可行就是因为可以重新触发函数组件，并且state状态具备组件的记忆


import { useState } from "react";
function App(){
    const [count,setCount] = useState(0)    //可记忆
    const handleClick = ()=>{
        setCount(count+1)       //可以重新触发函数组件的执行
    }
    console.log(123)
    return (
        <div>
            hello App
            <button onClick={handleClick}>点击</button>
            {count}
        </div>
    )
}

export default App

渲染与提交的过程分为三个步骤