如何定义具有传递的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,
}) => {}