如何在 Typescript 中正確使用 forwardRef？

Question

我是 React 的新手，請多多包涵

我有一個組件

const Avatar = forwardRef((props, ref) => {
  const {
    color,
    className,
    size,
    tag: Tag,
    ...rest
  } = props

  return (
    <Tag
      className={classnames('avatar', {
        [className]: className,
        [`bg-${color}`]: color,
        [`avatar-${size}`]: size
      })}
      ref={ref}
      {...rest}
    >
      ... //rest of codes
    </Tag>
  )
})

export default Avatar

現在，我可以在javascript中執行此操作

<Avatar size="sm" color="success" />

但是，在 Typescript 中我會收到錯誤消息

Property 'size' does not exist on type 'IntrinsicAttributes & RefAttributes<any>'  

知道出了什么問題嗎？ 我假設我需要通過ref所以我這樣做

const ref = React.createRef<Tag>();
<Avatar ref={ref} size="sm" color="success" />  

但我仍然有同樣的問題，如何將size和color作為道具傳遞？ 我嘗試在 inte.net 和 SO 周圍尋找答案，但我似乎找不到解決方案，我們將不勝感激。

Answer 1

將 forwardRef 放在導出上解決了 TSLint 錯誤

const Avatar = (props, ref) => {
const {
 color,
 className,
 size,
 tag: Tag,
 ...rest
} = props

return (
  <Tag
  className={classnames('avatar', {
    [className]: className,
    [`bg-${color}`]: color,
    [`avatar-${size}`]: size
  })}
  ref={ref}
  {...rest}
  >
  ... //rest of codes
  </Tag>
 )
}

export default forwardRef(Avatar)

Answer 2

我不確定你是否真的需要轉發參考。 我希望我的回答能給您一些解決用例的方法。 我可以看到您將Tag作為道具傳遞，並將其用作無效的 JSX 標簽。

裸露這一段 JSX 代碼是無效的

<Tag
  className={classnames('avatar', {
    [className]: className,
    [`bg-${color}`]: color,
    [`avatar-${size}`]: size
  })}
  ref={ref}
  {...rest}
>
  ... //rest of codes
</Tag>

因為您將Tag作為 prop 傳遞，所以不能將其用作 JSX 標簽。 您可以將 JSX 標記作為道具傳遞，但實現方式並非如此。 您應該改為導入該標簽，或者如果您真的想將其作為道具傳遞。 您需要在其父組件上組合它。

像這樣

const ParentComponent: React.FC = () => (
  <Avatar
    // You have to compose it here

    tag={
      <Tag
      // className={classnames('avatar', {
      //   [className]: className,
      //   [`bg-${color}`]: color,
      //   [`avatar-${size}`]: size
      // })}
      // ref={ref}
      // {...rest}
      >
        ... //rest of codes
      </Tag>
    }
  />
);

export default ParentComponent;

您也可以在 codeandbox 中對演示進行交互，這樣您可能會更多地了解我想說的內容。 只需點擊這里