打字脚本错误：类型 '{ children?: ReactNode; }' 上不存在属性'children'

Question

https://www.emgoto.com/react-search-bar/

我正在从上面的链接实现搜索栏
但我遇到了一个打字错误，我试图匹配类型，但没有成功。。

主页.tsx

const [searchQuery, setSearchQuery] = useState(query || '');
return(
<Search searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
);

搜索.tsx

import React, { FC } from 'react';
const Search: FC = ({ searchQuery, setSearchQuery }) => { // error!
return (
<form action="/" method="get">
<label htmlFor="header-search">
<span className="visually-hidden">Search blog posts</span>
</label>
<input
value={searchQuery}
onInput={(e) => setSearchQuery(e.target.value)}
type="text"
id="header-search"
placeholder="Search blog posts"
name="s"
/>
<button type="submit">Search</button>
</form>
);
};
export default Search;

错误：

1. 类型"｛children？：ReactNode；｝"上不存在属性"searchQuery"。ts(2339(
2. 类型"｛children？：ReactNode；｝"上不存在属性"setSearchQuery"。ts(2339(

Answer 1

来自CRice的评论

React.FC是一个接受道具类型作为参数的泛型类型。你需要包括道具类型。示例：

const Search: FC<{searchQuery: string, setSearchQuery: (new_query: string) => void}> = ...