在没有道具的 Typescript 中使用 React.forwardRef

Posted 2023-03-13

【中文标题】在没有道具的 Typescript 中使用 React.forwardRef

【英文标题】：Use React.forwardRef in Typescript with no props

【发布时间】：2021-02-03 12:58:58

【问题描述】：

我正在尝试将 ref 转发到不带任何道具的 Typescript 组件。当我使用React.forwardRef 时，它需要两个参数：props 和 ref。我的组件不使用道具。如何声明我的组件没有 linting 或编译错误？

现在我有：

// this says "props is declared but its value is never used"
const MyComponent = React.forwardRef((props = , ref: Ref<htmlDivElement>): JSX.Element => 
  return (
      <div ref=ref>
        Fun stuff
      </div>
  );
);

如果我像这样为我的道具声明一个空接口：

interface myProps 

然后我得到An empty interface is equivalent to ''，但是当我尝试仅使用 声明并且没有实际接口时，我得到：

Don't use `` as a type. `` actually means "any non-nullish value".
- If you want a type meaning "any object", you probably want `Record<string, unknown>` instead.
- If you want a type meaning "any value", you probably want `unknown` instead.

有什么方法可以为这些 props 声明一个接口/类型，它需要一个空对象并且不会导致我出现 linting 问题？

更新：当我按照此问题线程的建议使用空对象类型时，会导致使用组件的位置出现类型错误。

Type ' ref: RefObject<HTMLDivElement>; ' is not assignable to type 'Pick<NoElements<Record<string, never>>, string>'.
  Property 'ref' is incompatible with index signature.
    Type 'RefObject<HTMLDivElement>' is not assignable to type 'never'.

显示在：

<MyComponent ref=refToForward />

似乎有鸡蛋的情况。

【问题讨论】：

如果您改用React.forwardRef<HTMLDivElement, any>() 会怎样？

【参考方案1】：

您可以在props 前加上一个下划线，例如_props，以去掉props is declared but its value is never used。

对于空接口，我通常使用类型，因此，在您的情况下，这将是 type myProps = 。

更新：

我们如何将类型传递给<>，例如：

type Props = ;

const MyComponent = React.forwardRef<HTMLDivElement, Props>((props, ref) => 
  return (
      <div ref=ref>
        Fun stuff
      </div>
  );
);

【讨论】：

使用类型仍然给我一个错误：不要使用 作为类型。 实际上意味着“任何非空值”。 - 如果你想要一个表示“任何对象”的类型，你可能想要Record<string, unknown>。 - 如果你想要一个表示“任何值”的类型，你可能想要unknown。

好的，所以我查看了它，看来您正在使用typescript-eslint 配置。基本上，repo 的 cmets 不鼓励您尝试做什么，但您始终可以 // eslint-disable-next-line 删除消息或重新配置您的 .eslintrc 文件： "rules": "@typescript-eslint/ban-types": [ "error", "extendDefaults": true, "types": "": false ]

Basically, what are you trying to do is not encouraged in the comments of the repo。究竟是什么不被鼓励？你有链接吗？是否在某处提出了替代方案？

当然，这里是github.com/typescript-eslint/typescript-eslint/issues/… 看看bradzacher 评论的最后一部分，如果它意味着别的，请告诉我，因为我也想知道:)

我想推荐的方法是定义组件的 props，但由于您想省略它们，最好重新配置 eslint 或禁用该特定行上的特定规则