在 TypeScript 中使用带有子项的 forwardRef 组件

发布于02月14日

使用@types/react 16.8.2和TypeScript 3.3.1.

我直接从React documentation中提取了这个正向参考示例，并添加了几个类型参数:

const FancyButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef<HTMLButtonElement>();
<FancyButton ref={ref}>Click me!</FancyButton>;

我在FancyButton以下的最后一行中得到以下错误:

类型"{ children: string; ref: RefObject<HTMLButtonElement>; }"不是

这似乎是React的类型定义.forwardRef的返回值错误，无法正确合并到子属性中.如果我自动关闭<FancyButton>次，错误就会消失.这个错误没有搜索结果，这让我觉得我遗漏了一些明显的东西.

推荐答案

trevorsg，你需要传递按钮属性:

import * as React from 'react'

type ButtonProps = React.HTMLProps<HTMLButtonElement>

const FancyButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
  <button type="button" ref={ref} className="FancyButton">
    {props.children}
  </button>
))

// You can now get a ref directly to the DOM button:
const ref = React.createRef<HTMLButtonElement>()

<FancyButton ref={ref}>Click me!</FancyButton>

补充:

在TS和@types/react的最新版本中，也可以使用React.ComponentPropsWithoutRef<'button'>而不是React.HTMLProps<HTMLButtonElement>