我在一个项目中有几个类,是用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显然是将数组粘贴到对象中,而不是像我期望的那样传递数组。
有谁知道我做错了什么吗?
1条答案
按热度按时间ljsrvy3e1#
您需要将
props
传递给您的ItemTable
,而不是直接传递给items
应该是
也可以简称为