react父子组件传值

小菜鸟学代码··

已于 2022-05-24 16:15:15 修改

阅读量1.1k

点赞数

分类专栏： React 文章标签：微信小程序小程序前端

于 2022-04-01 18:16:39 首次发布

本文链接：https://blog.csdn.net/weixin_48255917/article/details/123902942

版权

React 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文详细介绍了在React中如何进行父子组件之间的数据传递。首先展示了最基础的父组件通过props向子组件传递数据的方法，然后通过`forwardRef`和`useImperativeHandle`讲解了如何实现子组件向父组件传递值，包括调用子组件方法的场景。实例清晰，有助于理解React组件间的通信机制。

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

react父子组件传值

首先父传子组件

最原始的props获取

父组件

import React, { useRef, memo, useMemo, useCallback, useState } from 'react';
import Add from "./page/add"
export default function Home() {
    const paData = useRef('11')
    return (
        <>
            <Add paData={paData}></Add>   
        </>
    )
}

子组件
直接props就可以获取

import React, { useRef, memo, useMemo, useCallback, useState, forwardRef,useImperativeHandle } from 'react';
const Home = （props,ref） => {
	    console.log(props.paData.current, 'w1');
    return (
      <>
        </>
    )

})
export default Home

子传父

借助forwardRef,useImperativeHandlehook来传值
父组件

import React, { useRef, memo, useMemo, useCallback, useState } from 'react';
import Add from "./page/add"
export default function Home() {
    const fun = () => {
        console.log(changea.current.focus, '51223');
    }
    return (
        <>
            <Add ></Add>
             <div onClick={fun}>+1</div>
        </>
    )

}

子组件

import React, { useRef, memo, useMemo, useCallback, useState, forwardRef, useImperativeHandle } from 'react';
const Home = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
        focus: () => {
            chaneV.current.focus();
            console.log(2);
        }
    }))
    return (
        <>
            <div>子点击事件</div>
            <button onClick={chaneV}>+1</button>
            {console.log(chDa)}
            <div>{chDa}</div>
        </>
    )

})