类型 '{}' 不能分配给类型 '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

您缺少Search组件所需的属性，错误显示suggestion List。你需要类似的东西：

<div>
  <Search suggestionList={...} />
</div>

（也许不仅仅是suggestionList失踪）

React.Component 定义是：

interface Component<P = {}, S = {}>

其中P定义组件属性和S状态。您必须将 中定义的所有必需属性传递给组件P。

在您的示例中，组件属性类型为SearchForm。因此，您至少需要传递 的所有必需属性SearchForm。

请参阅定义道具和状态类型以获得更完整的解释。