【React】React+ts组件之间的传值,可用于关闭弹框之类操作

这是借鉴文章链接，可以看看这个

个人研究了一下React+Ts组件之间的传值，主要思路是利用react的useCallback进行值的操作.

useCallback(()=>方法,[])
第一个参数用来改变值、修改数据之类的操作,第二个参数是监听值的变化而触发
如:
useCallback((num:number)=>addnum(num+1),[])

我的设计思路是点击一个按钮就会显示(true)和隐藏(false)子组件。点击父组件按钮后(true)，可以在子组件里操作父组件的值来隐藏(false)子组件,案例可以看看慕课网PC的登录.

先看看父组件代码

import React, { useCallback, useEffect, useState } from 'react';
//引入的组件(子组件)
import Children from '子组件路径';
const Father: React.FC = () => {
    //声明你需要的值,就比如我需要true和fasle判断是否显示
    const [IfShow,SetIfShow] = useState<boolean>(fasle);
    
    //父组件里显示隐藏操作
    const Show = ()=>{
        SetIfShow(!IfShow)
    }
    
    //这是传给子组件的方法(Function),便于在子组件中修改父组件的值
    const ChangeState = useCallback((state: boolean) => {
      SetIfShow(state)
    },[])
    
    return (
        <>
            <buttom onClick={Show}>父组件操作显示/隐藏</buttom>
            
            {/* 三元运算符都会吧 */}
            {IfShow? 
                <div>
                    {/* 这里我传了一个boolean值和一个function方法给子组件 */}
                    显示了子组件<Children clickstate={IfShow} changestate={ChangeState}/>
                </div>
            :<div>什么都没有</div>
            }
        </>
    )
}
export default Father

上面就是父组件的代码,下面就是子组件的代码

由于TS的原因,子组件接收值,必须定义一个interface类型,interface的值必须包含父组件传下来的类型,比如我传了一个boolean和function,都必须声明出来,否则报错

import React, { useCallback, useEffect, useState } from 'react';
//声明一个类型,值的类型、名称要和父组件传过来的一致
interface stateA{
    clickstate:boolean,
    changestate:Function,
}
//这里需要接收父组件传来的参数
const Child: React.FC<stateA> = (props) => {
    //接收 值和方法 这里clickstate是boolean类型,changestate是父组件传下来的方法
    const [clickstate,changestate] = props;
    //子组件拿到父组件传来的方法changestate,进行修改值
    const ChangeState = useCallback(() => {
      changestate(!clickstate) //boolean取反
    },[changestate,clickstate])
    return (
       <div onClick={ChangeState}>
           让父组件的 IfShow 值进行改变
       </div>
    )
}
export default Child

这只是组件之间传值的一种方法,还有其他方法,如果本文章有错误之处,欢迎各位大佬纠正我的错误,谢谢!