reactjs - 为什么我不能将此组件与 TypeScript 一起使用？

Question

我找到了一个 react-debounce-input库，我在我的应用程序中使用它没有问题。

但是自从我转向 TypeScript 后，我​​在尝试使用这个库时遇到了错误。这是最小的可重现示例:

import { FunctionComponent } from 'react';
import { DebounceInput } from 'react-debounce-input';

type Props = {};

export const Foo: FunctionComponent<Props> = () => {
  return (
    <form>
      <DebounceInput />
    </form>
  );
};

我得到的错误是:

TS2786: 'DebounceInput' cannot be used as a JSX component.
  Its instance type 'DebounceInput<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>' is not a valid JSX element.
    Type 'DebounceInput<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

我错过了什么吗？根据文档，它应该可以工作。我使用的是最新版本。

Answer 1

typescript 没有问题:

import { FunctionComponent } from "react";
import { DebounceInput } from "react-debounce-input";
import { useState } from "react";

type Props = {};

export const Foo: FunctionComponent<Props> = () => {
  const [state, setState] = useState("");

  return (
    <form>
      <div>input: {state}</div>

      <DebounceInput
        minLength={5}
        debounceTimeout={500}
        onChange={(e) => setState(e.target.value)}
      />
    </form>
  );
};

Sandbox try it out

关于react函数类型的旁注，可以写成:

const Foo: React.FC<Props> = () => { ... }

这样你就不必做 import { FunctionComponent } from "react";