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>
   }

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

Answer 1

您缺少Search组件的必需属性，错误显示为suggestion List。你需要这样的东西：

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

（可能不仅仅suggestionList缺失了）

React.Component定义是：

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

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

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

有关更完整的说明，请参阅Define Props and State Types。

Answer 2

正如@Tobías所说，您缺少搜索组件的必需属性。

为所有道具赋予值将对其进行修正：

<Search prop1={'string'} prop2={obj} />

Answer 3

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

interface SearchProps {
  suggestionList: any
}

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

输入＆＃39; {}＆＃39;不能分配类型＆＃39; IntrinsicAttributes＆amp; IntrinsicClassAttributes <search>＆amp; Readonly＆lt; {children？：ReactNode; }＆GT;

3 个答案: