reactjs - 类型 '{}' 不可分配给类型 'IntrinsicAttributes & IntrinsicClassAttributes<Search> & Readonly<{ children? : ReactNode; }>

Question

我对 React 和 TypeScript 还很陌生。我正在 Visual Studio 2017 中开发一个网页，其中有一个搜索组件，我想在我的主页组件中使用它。但是在将搜索导入我的主组件后，我得到一个编译时错误:

Type {} is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Search> & Readonly<{ children?: ReactNode; }>  
Type {} is not assignable to type Readonly<SearchForm>  
 Property 'suggestionList' is missing in type {}

搜索组件代码:

export class Search extends React.Component<SearchForm> { //SearchForm is a class with string and an object of another class as properties
constructor() {
    super();
}

主页组件代码:

   export class Home extends React.Component<RouteComponentProps<{}>, {}> 
   {
   return <div>
        < Search /> // <=Getting error at this line
   <div>
   }

如果我删除 RouteComponentProps<{}>从 Home 组件，然后我在 route.tsx 文件中收到错误。我知道，我一定是做错了什么或犯了一些愚蠢的错误。我用谷歌搜索了这个，但没有得到任何有用的答案。有人可以告诉我如何解决这个问题吗？

Answer 1

如果您想创建功能组件，可以使用泛型来消除此错误。考虑这个例子。

interface SearchProps {
  suggestionList: any
}

export const Search: React.FC<SearchProps> = ({suggestionList}): JSX.Element => {
   return <div>...</div>
}