解决React 子组件使用高阶函数注解后,父组件中会出现无法获取其ref实例情况

       最近在整理react项目的基建代码,抽取高阶组件,使用@注解之后发现子组件没法获取ref实例。

参见下面的代码

父组件的代码

在函数内获取实例

获取实例的函数

遵循面向百度编程的原则,百度了一大波:

 

尝试了百度的方法

控制台的打印情况:

打印的结果

对象为空,百思不得其解的情况,做了如下的改进:

父组件上自定义属性

子组件做如下处理:

将子组件的实例传回父组件

在控制台的打印父组件:

父组件的打印

控制台获取到的实例

思路:子组件与父组件的props 数据流向特性,受控组件与非受控组件的。开始上手react之前,熟读一遍react官方文档。熟练使用了react上手项目之后,还是要再回归一遍文档,读起来是会有不同的体悟的。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
React中,函数式组件通常不直接支持通过`ref`访问并调用组件的方法,因为函数式组件没有传统的生命周期方法和实例状态。但是,你可以通过以下几种方式间接地实现这个目标: 1. **forwardRef** API:`forwardRef`是一个高阶函数,可以让你将`ref`传递给组件,并从外部接收一个回调,这个回调可以在适当的时候调用组件的方法。 ```jsx import { forwardRef } from 'react'; function ParentComponent({ childProps }) { const childRef = React.useRef(null); const handleClick = () => { if (childRef.current) { childRef.current.childMethod(); } }; return ( <ChildComponent ref={childRef} {...childProps} /> // 在需要的地方添加按钮事件处理,触发 handleClick <button onClick={handleClick}>Call Child Method</button> ); } const ChildComponent = forwardRef((props, ref) => { // ... useEffect(() => { // 当组件挂载后,设置方法可被外部引用 ref.current = { childMethod }; }, [ref]); // ... }); ``` 2. **useImperativeHandle**:如果你确定组件暴露了某个特定的方法,可以使用`useImperativeHandle`来提供一个自定义的API,让组件能够像操作DOM元素一样调用它。 ```jsx import React, { useRef, useImperativeHandle } from 'react'; function ParentComponent({ childProps }) { const childRef = useRef(null); useImperativeHandle(childRef, () => ({ callChildMethod: () => { childRef.current.callChildMethod(); }, })); // 使用 ImperativeHandle 的 API return ( <ChildComponent ref={childRef} {...childProps} /> // ... <button onClick={() => childRef.current.callChildMethod()}>Call Child Method</button> ); } // ...在 ChildComponent 中定义 callChildMethod 方法 ``` 请注意,在实际应用中,尽量避免过度依赖`ref`直接操作组件内部的状态或方法,除非有非常明确的需求。通常,更好的做法是利用 props 和 React 的其他特性来管理组件间通信。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值