react 泛型组件

最新推荐文章于 2024-06-19 08:03:07 发布

guxuehua

最新推荐文章于 2024-06-19 08:03:07 发布

阅读量467

点赞数

文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/guxuehua/article/details/131312511

版权

import React, { useState, useRef, ForwardedRef } from 'react';
type AA = {
  a: string;
  [props: string]: any;
};
interface IBossInfoProps<T> {
  eventClick: (arg: T) => void ;
}
const BossInfo = React.forwardRef((props: IBossInfoProps<any>, myRef: ForwardedRef<HTMLDivElement>) => {
  const { eventClick } = props;
  const handleClick = () => {
    eventClick?.({
      a: '2',
      b: 1,
    });
  };
  return (
    <div onClick={handleClick} ref={myRef}>
      test
    </div>
  );
}) as <T>(props: IBossInfoProps<T> & { ref?: ForwardedRef<HTMLDivElement> }) => JSX.Element;


const HoldOn = () => {
  const [data, setData] = useState<AA>();
  const testRef = useRef<HTMLDivElement>(null);
  const handleClick = (arg: AA) => {
    setData({
      ...data,
      ...arg,
    });
  };
  return (
    <>
      <BossInfo<AA> ref={testRef} eventClick={handleClick} />
    </>
  );
};