Reactjs/Typescript无法将项数组作为属性传递给子级

cgyqldqp  于 2022-12-30  发布在  TypeScript
关注(0)|答案(1)|浏览(127)

我在一个项目中有几个类,是用create-react-app创建的,我想把一个对象数组传递给子元素,如下所示。
Items.tsx

import * as React from 'react';
import ItemTable from './ItemTable';
import { IItem } from './ItemRow';

class Items extends React.Component {
    private items = IItem[];
    componentWillMount() {
      // connect to backend service and retrieve all Items
      items = get_items();
    }

    render() {
      return (
        <ItemTable items={this.items} />
      );
    }
}

export default Items;

ItemsTable.tsx

import * as React from 'react';
import { Table } from 'reactstrap';
import ItemRow from './ItemRow';

let ItemTable = (items: IItem[]) => (
  <Table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Website</th>
      </tr>
    </thead>
    <tbody>
        {items.map(item => (
          <ItemRow item={item} />
        ))}
    </tbody>
  </Table>
);

export default ItemTable;

ItemRow.tsx

import * as React from 'react';

export interface IItem {
  name: string;
  description: string;
  website: string;
}

let ItemRow = (item: IItem) => (
  <tr>
    <td>{item.name}</td>
    <td>{item.description}</td>
    <td>{item.website}</td>
  </tr>
);

export default ItemRow;

遗憾的是,在构建/编译过程中,我一直收到一个错误,指出类型'{ items: IItem[]; }'不能被赋值给类型'items: IItem[]'。注意,与第一个示例相比,第二个示例缺少大括号。
无论是Typescript还是React,我假设Typescript显然是将数组粘贴到对象中,而不是像我期望的那样传递数组。
有谁知道我做错了什么吗?

ljsrvy3e

ljsrvy3e1#

您需要将props传递给您的ItemTable,而不是直接传递给items

let ItemTable = (items: IItem[]) => (

应该是

let ItemTable = (props: {items: IItem[]}) => (
  const {items} = props;

也可以简称为

let ItemTable = ({items}: {items: IItem[]}) => (

相关问题