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

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

参见下面的代码

父组件的代码

在函数内获取实例

获取实例的函数

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

 

尝试了百度的方法

控制台的打印情况:

打印的结果

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

父组件上自定义属性

子组件做如下处理:

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

在控制台的打印父组件:

父组件的打印

控制台获取到的实例

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

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
React组件可以通过以下几种方式使用组件中的函数: 1. 通过props传递函数:在组件中定义一个函数,并将其作为属性传递给组件组件可以通过props访问到该函数,并在需要的时候调用它。 组件代码示例: ```jsx import React from 'react'; import ChildComponent from './ChildComponent'; class ParentComponent extends React.Component { handleClick() { console.log('Parent component clicked'); } render() { return ( <div> <ChildComponent onClick={this.handleClick} /> </div> ); } } export default ParentComponent; ``` 组件代码示例: ```jsx import React from 'react'; class ChildComponent extends React.Component { render() { return ( <button onClick={this.props.onClick}> Click me </button> ); } } export default ChildComponent; ``` 2. 使用回调函数:组件可以将一个回调函数作为属性传递给组件组件在需要调用组件中的函数时,可以通过调用该回调函数来实现。 组件代码示例: ```jsx import React from 'react'; import ChildComponent from './ChildComponent'; class ParentComponent extends React.Component { handleClick() { console.log('Parent component clicked'); } render() { return ( <div> <ChildComponent onClick={() => this.handleClick()} /> </div> ); } } export default ParentComponent; ``` 组件代码示例: ```jsx import React from 'react'; class ChildComponent extends React.Component { render() { return ( <button onClick={this.props.onClick}> Click me </button> ); } } export default ChildComponent; ``` 以上是两种常见的在React组件使用组件中函数的方法。根据具体情况选择合适的方式来实现所需功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值