React获取子组件(函数组件)的方法属性

教程

发布日期: 2023-06-16

更新日期: 2023-07-03

文章字数: 605

阅读时长: 2 分

阅读次数:

遇到问题

在父组件想通过ref的方式获取到子组件的方法或者属性时,发现不好使因为获取到的是current:null。经过学习了解，在react中想通过ref获取子组件的实例，子组件必须是类组件才行。关于函数组件的获取方法就有了以下的教程。

用到技术

forwardRef
forwardRef 是 React 提供的一个高阶函数（Higher-Order Function），用于在函数组件中转发 ref。
示例

import React, { forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  // 子组件的内容
  return <div>Child Component</div>;
});

export default ChildComponent;

useImperativeHandle
useImperativeHandle 是 React 的一个钩子函数，用于在函数组件中自定义暴露给父组件的实例值或方法
通常情况下，函数组件的内部状态和方法是对外隐藏的，父组件无法直接访问或调用。但是，在某些情况下，我们可能希望函数组件能够向外部暴露一些特定的实例值或方法，这时就可以使用 useImperativeHandle。
useImperativeHandle 接收两个参数：ref 和一个回调函数。回调函数可以返回一个对象，该对象中的属性和方法将会成为父组件中通过 ref 访问到的实例值或方法。
示例
```
import React, { forwardRef, useImperativeHandle } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const internalMethod = () => {
    console.log('Internal method called!');
  };

  useImperativeHandle(ref, () => ({
    externalMethod: () => {
      console.log('External method called!');
    },
    internalMethod
  }));

  return <div>Child Component</div>;
});

export default ChildComponent;
```

完整示例

import React, { forwardRef, useImperativeHandle } from 'react';

/**这里有不同需要使用forwardRef包裹 */
const ChildComponent = forwardRef((props, ref) => {
  const internalMethod = () => {
    console.log('Internal method called!');
  };

  useImperativeHandle(ref, () => ({
    externalMethod: () => {
      console.log('External method called!');
    },
    internalMethod
  }));

  return <div>Child Component</div>;
});

export default ChildComponent;

2023-7-23 遇到新问题

当我在项目中使用到dva或者redux的connect来转发数据时无法获取到数据

所以有了一下的补充
在dva中的代码如下

import React, {forwardRef, useImperativeHandle } from 'react'
import { connect } from 'umi'

const AddEditSite = (props) => {
    const {
        dispatch,
        /**转发Ref */
        refInstance,
    } = props
    const mapDispatchToProps = {
    }
    const {

    } = mapDispatchToProps

    useImperativeHandle(refInstance, () => ({
        show: (values, type) => {
            console.log(values, type);
            setAddOrEditType(type)
            setOpen(true)
        },
    }));
    
    return (<></>)
}

const mapStateToProps = (state) => {
    return {
    }
}

/**这里也有所不同 */
const ConnectedAddEditSite = connect(mapStateToProps)(AddEditSite);
export default forwardRef((props, ref) => <ConnectedAddEditSite {...props} refInstance={ref} />);