TS/React 使用 forwardRef 将 ref 传递给组件

Question

我有一个带有 forwardRef 的组件，想在另一个带有 forwardRef 的组件中使用它：


const DEFAULT_ELEMENT = "button";

export type PropsOf<TTag = any> = TTag extends React.ElementType
  ? React.ComponentProps<TTag>
  : never;

export type ButtonProps = PropsOf<typeof DEFAULT_ELEMENT> & {};

// custom button, works fine:
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (props, ref) => (<button ref={ref} {...props}/>)
)

// Same component, but uses the previous one, TS complains about refs:
export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(
(props, ref) => (
  <Button
    ref={ref} //<- Here TS shows error
    // TS2322: Type 'string | ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null'
    // is not assignable to type 'Ref<HTMLButtonElement> | undefined'.
    //   Type 'string' is not assignable to type 'Ref<HTMLButtonElement> | undefined'.
    {...props}
  />
))

为了便于阅读，这里有一张图片：

React 应该接受它自己的引用，但它在抱怨。代码有什么问题，如何修复错误？

Answer 1

这里的问题在于ButtonProps类型：它包含ref 属性.

您可以通过以下方式省略它：

export type ButtonProps = Omit<PropsOf<typeof DEFAULT_ELEMENT>, 'ref'>;

TS/React 使用 forwardRef 将 ref 传递给组件

TS/React passing ref to a component with forwardRef

reactjs

typescript