reactjs 在Typescript中使用React.forwardRef，不使用props

jgovgodb 于 2023-06-05 发布在 React

关注(0)|答案(2)|浏览(515)

我正试图转发一个引用到一个不接受任何 prop 的Typescript组件。当我使用React.forwardRef时，它需要两个参数： prop 和裁判我的组件不使用 prop 。我如何声明我的组件而没有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>
  );
});

如果我像这样为props声明一个空接口：

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} />

看起来是鸡生蛋的问题

reactjs

来源：https://stackoverflow.com/questions/64449555/use-react-forwardref-in-typescript-with-no-props

2条答案

按热度按时间

zsohkypk1#

如果你想使用forwardRef，但不需要props，你可以试试这个：

const MyComponent = forwardRef((_: unknown, ref: Ref<HTMLDivElement>) => {
  return (
      <div ref={ref}>
        ...
      </div>
  );
});

赞(0）回复(0）举报 2023-06-05

5vf7fwbs2#

您可以在props前面加上一个下划线，如_props，以消除props is declared but its value is never used。
对于空接口，我通常使用类型，因此，在您的情况下，这将是type myProps = {}。
UPD：
我们将类型传递到<>中如何，如：

type Props = {};

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

赞(0）回复(0）举报 2023-06-05

我来回答

reactjs 在Typescript中使用React.forwardRef，不使用props

2条答案

相关问题

热门标签

最新问答