如何使用传递的 state/setState 值定义 props 接口？

Question

我目前正在学习 TypeScript，我在我的应用程序中发现了一个问题，在将 React.FunctionComponent 添加到我的组件后，我的 Props 界面出现了错误

Type '({ value, setValue, }: Props) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
   Types of parameters '__0' and 'props' are incompatible.
      Type '{ children?: ReactNode; }' is missing the following properties from type 'Props': value, setValue ts(2322)

我的代码有一部分：

interface Props {
    value: string
    setValue: React.Dispatch<React.SetStateAction<string>>
    children: React.ReactNode
}

const SearchInput: React.FunctionComponent = ({
    value,
    setValue,
}: Props) => {}

我尝试只使用 ReactNode，我尝试使用 JSX.Element，但没有任何效果，有人可以解释我问题出在哪里以及如何解决吗？

Answer 1

React.FunctionComponent是一个通用组件，你需要将你的Props传递给它： React.FunctionComponent<Props> 。 这也允许您省略函数参数的类型注释，因为它可以自动派生：

const SearchInput: React.FunctionComponent<Props> = ({
    value,
    setValue,
}) => {}