Question

我在将方法searchForBooks作为道具传递给JumboBooks组件的SearchBooks组件时遇到了TS2322错误：

JumboBooks.tsx（家长）

import { RouteComponentProps } from 'react-router';
...
export class JumboBooks extends React.Component<RouteComponentProps<{}>, {}> {
...
searchForBooks(searchFilters: SearchParameters){...}    
...

 public render() {
        return (
            <div>
<SearchBooks searchForBooks={this.searchForBooks} />
...
}

SearchBooks.tsx

import { RouteComponentProps } from 'react-router';
...
interface IBookSearchProps {
    searchForBooks:(filters: SearchParameters)=> void; 
}

export class SearchBooks extends React.Component<IBookSearchProps & RouteComponentProps<{}>, {}> {
isearchForBooks() {
    var filters: SearchParameters = {
        // fill up parameters based on ref values
    };

    this.props.searchForBooks(filters);
  }
  ...
}

export interface SearchParameters
{
    ...
}

错误：

错误： TS2322：输入＆＃39; {searchForBooks：（searchFilters：SearchParameters）=＆gt;无效; }＆＃39;不能分配类型＆＃39; IntrinsicAttributes＆amp; IntrinsicClassAttributes＆amp; Readonly＆lt; {children？：ReactNode; }＆GT; ...＆＃39 ;. 输入＆＃39; {searchForBooks：（searchFilters：SearchParameters）=＆gt;无效; }＆＃39;不能分配给＆＃39; Readonly＆gt;＆＃39;。物业＆＃39;匹配＆＃39;类型＆＃39; {searchForBooks：（searchFilters：SearchParameters）=＆gt;无效; }＆＃39;

Answer 1

只有您的JumboBooks实际上正在用作RouteComponent（作为<Route component={JumboBooks} />传递），因此只有它会自动接收match道具。您想要访问JumboBooks的{{1}}的任何后代都必须像普通的旧道具一样传入：

match

如果您实际上不需要export class JumboBooks extends React.Component<RouteComponentProps<{}>, {}> { public render() { return ( <div> <SearchBooks match={this.props.match} searchForBooks={this.searchForBooks} /> </div> ); } }道具，请从match组件中删除RouteComponentProps<{}>：

SearchBooks

Reactjs和打字稿错误TS2322：类型不能分配给＆＃39; IntrinsicAttributes＆amp; IntrinsicClassAttributes

1 个答案: