运行tsc会在React组件上产生错误

Question

我用道具传递了几个零件，并且工作正常，但是当我运行yarn tsc时，出现以下错误：

src/modules/BookingsPage/BookingsPage.tsx:52:14 - error TS2322: Type '{ data: { spBookingId: string; flightBooking: string; lastName: string; amount: string; date: string; }[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<BookingsTable> & Readonly<{ children?: ReactNode; }>'.
  Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<BookingsTable> & Readonly<{ children?: ReactNode; }>'.

52             <BookingsTable data={tableData}/>
                ~~~~~~~~~~~~~

src/modules/BookingsPage/BookingsTable.tsx:44:37 - error TS2339: Property 'data' does not exist on type 'Readonly<{ children?: ReactNode; }>'.

44          <TableRow data={this.props.data}/>
                                       ~~~~

src/modules/BookingsPage/TableRow.tsx:16:11 - error TS2304: Cannot find name 'T'.

16     data: T[];
             ~


Found 3 errors.

这是我的代码：

TableRow类：

type IData = {
    data: T[];
  }

export default class TableRow extends PureComponent<IData> {
    public render() {
      const {
        data
      } = this.props;
      const row = data.map((data: any) =>
      <TableBodyRow>
        <TableData>{data.spBookingId}</TableData>
        <TableData>{data.flightBooking}</TableData>
        <TableData>{data.lastName}</TableData>
        <TableData>{data.amount}</TableData>
        <TableData>{data.date}</TableData>
      </TableBodyRow>
      );
      return (
        <>{row}</>
      );
    }
  }

类BookingsTable

export default class BookingsTable extends PureComponent{

  constructor(props: any) {
    super(props);
  }

  public render() {


    return (
      <TableContainer>
        <thead>
        <TableHeadRow>
          <TableHead>Booking id</TableHead>
          <TableHead>Flight Booking</TableHead>
          <TableHead>Last name</TableHead>
          <TableHead>Amount</TableHead>
          <TableHead>Date</TableHead>
        </TableHeadRow>
        </thead>
        <tbody>

         <TableRow data={this.props.data}/>  
        </tbody>

      </TableContainer>
    );
  }
}

和BookingPage：

const tableData = [
  {
    spBookingId: 'Y37HJ',
    flightBooking: 'HJK67',
    lastName: 'DOE',
    amount: '45e',
    date: '2019-02-12',
  },
  {
    spBookingId: 'Y37HJ',
    flightBooking: 'HJK67',
    lastName: 'Johnson',
    amount: '45e',
    date: '2019-02-12',
  },
  {
    spBookingId: 'Y37HJ',
    flightBooking: 'HJK67',
    lastName: 'Madsen',
    amount: '45e',
    date: '2019-02-12',
  },
  {
    spBookingId: 'Y37HJ',
    flightBooking: 'HJK67',
    lastName: 'Doe',
    amount: '45e',
    date: '2019-02-12',
  }
];

interface IbookingsPage{}

const BookingsPage: FunctionComponent<IbookingsPage> = () => {

    return (
        <>
           <Heading>
            <h3>Bookings</h3>   
          </Heading> 
            <BookingsTable data={tableData}/>

        </>
    );
}

export default BookingsPage;

Answer 1

您具有以下

type IData = {
    data: T[]; // Error: Cannot find `T`
}

出现错误的原因是，您尚未将T作为通用参数添加到IData。

修复

type IData<T> = {
    data: T[]; // OK 
}