TypeScript error: Property 'children' does not exist on type '{ children?: ReactNode; }'

Question

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

我正在实施上述 link 中的搜索栏。
但是我得到一个打字稿错误，我试图匹配类型，但它没有用..

Homepage.tsx

const [searchQuery, setSearchQuery] = useState(query || '');

return(
<Search searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
);

Search.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;

错误：

属性 'searchQuery' 不存在于类型 '{ children?: ReactNode; }'.ts(2339)
属性 'setSearchQuery' 不存在于类型 '{ children?: ReactNode; }'.ts(2339)

Answer 1

来自CRice的评论

React.FC 是一个通用类型，它接受道具的类型作为其参数。您需要包括道具类型。示例：

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

TypeScript error: Property 'children' does not exist on type '{ children?: ReactNode; }'

TypeScript error: Property 'children' does not exist on type '{ children?: ReactNode; }'

javascript

search

typescript

reactjs

use-state