使用React.forwardRef傳遞泛型參數(shù)

更新時間：2023年05月12日 09:32:51 作者：Joey_Tribiani

這篇文章主要介紹了使用React.forwardRef傳遞泛型參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

React.forwardRef傳遞泛型參數(shù)

使用React函數(shù)組件開發(fā)的過程中會遇到父組件調(diào)用子組件的方法或者屬性的場景，首次先說怎么通過React.forwardRef來將子組件的屬性或者方法暴露給父組件

使用forwardRef暴露組建的方法和屬性

子組件

import { Box, Typography } from "@mui/material";
import { forwardRef, useImperativeHandle } from "react";
interface LocationChildProps {
  data: string;
}
export interface LocationChildRef {
  sayType(): void;
}
const LocationChild = forwardRef<LocationChildRef, LocationChildProps>((props, ref) => {
  useImperativeHandle(ref, () => ({
    sayType() {
      console.log("子組件的data是 " + typeof props.data);
    },
  }));
  return (
    <Box>
      <Typography>{typeof props.data}</Typography>
    </Box>
  );
});
export default LocationChild;

在子組件中我們需要接受一個key為data的props，然后在子組件中展示這個值，并且通過useImperativeHandle向外暴露一個sayType的方法，最后用forwardRef將子組件封裝然后暴露出去，這里forwardRef的作用就是包裝該組件為一個可以通過Ref訪問的組件。

父組件

import { Button } from "@mui/material";
import { useRef } from "react";
import ConfigDetailContainer from "../options/ConfigDetailContainer";
import LocationChild, { LocationChildRef } from "./LocationChild";
export default function DeviceLocation() {
  const locationChildRef = useRef<LocationChildRef>();
  const handleClick = () => {
    locationChildRef.current.sayType()
    // 輸出： 子組件的type是 string  
  };
  return (
    <ConfigDetailContainer title="device.configTabs.LOCATION_HISTORY">
      <LocationChild ref={locationChildRef} data="asdafaf"></LocationChild>
      <Button onClick={handleClick}>查看子組件的type的類型</Button>
    </ConfigDetailContainer>
  );
}

父組件中需要通過useRef來創(chuàng)建ref并傳遞給子組件，這樣父子組件就建立了連接，父組件可以通過ref來訪問子組件中自定義暴露的屬性或方法。

這里的操作就是父組件點擊按鈕控制臺打印子組件接收到的data這個prop的類型。

泛型參數(shù)

現(xiàn)在新的問題就是我們的父組件傳遞的data的類型不是固定的，這時候子組件就要將data的類型用泛型來定義，所以這里就有了fowardRef傳遞泛型參數(shù)的問題：

我們可以這樣改造子組件，思路就是將這個組件改為工廠hansh的生成模式：

import { Box, Typography } from "@mui/material";
import { forwardRef, useImperativeHandle } from "react";
export interface LocationChildProps<T = string> {
  data: T;
}
export interface LocationChildRef {
  sayType(): void;
}
const LocationChild = function <T>() {
  return forwardRef<LocationChildRef, LocationChildProps<T>>((props, ref) => {
    useImperativeHandle(ref, () => ({
      sayType() {
        console.log("子組件的data是 " + typeof props.data);
      },
    }));
    return (
      <Box>
        <Typography>{typeof props.data}</Typography>
      </Box>
    );
  });
};
export default LocationChild;

然后在父組件中使用

import { Button } from "@mui/material";
import { PropsWithRef, useRef } from "react";
import ConfigDetailContainer from "../options/ConfigDetailContainer";
import LocationChild, { LocationChildProps, LocationChildRef } from "./LocationChild";
export default function DeviceLocation() {
  const locationChildRefString = useRef<LocationChildRef>();
  const locationChildRefBoolean = useRef<LocationChildRef>();
  const handleClick = () => {
    locationChildRefString.current.sayType();
    locationChildRefBoolean.current.sayType();
  };
  const LocationChildComponent = LocationChild<string>();
  const createComponent = function <T>(props: PropsWithRef<any>, ref: React.MutableRefObject<LocationChildRef>) {
    const Mycomponent = LocationChild<T>();
    return <Mycomponent ref={ref} {...props}></Mycomponent>;
  };
  return (
    <ConfigDetailContainer title="device.configTabs.LOCATION_HISTORY">
      <LocationChildComponent ref={locationChildRefString} data={"123"}></LocationChildComponent>
      {createComponent({ data: true }, locationChildRefBoolean)}
      <Button onClick={handleClick}>查看子組件的type的類型</Button>
    </ConfigDetailContainer>
  );
}

我們可以直接調(diào)用LocationChild方法生成組件，也可以再度封裝為createComponent這樣的方法，這樣就實現(xiàn)了forwardRef中使用泛型參數(shù)的需求。

react forwardRef 導致泛型丟失

網(wǎng)上沒有找到合適的方案，看了 antd 的源碼

實現(xiàn)方式如下

const ForwardTable = React.forwardRef(InternalTable) as <RecordType extends object = any>(
? props: React.PropsWithChildren<TableProps<RecordType>> & { ref?: React.Ref<HTMLDivElement> },
) => React.ReactElement;
// so u can use
<Table<{id: string, b: number}> ?/>