Reactjs/Typescriptは、子としてプロパティとして配列の配列を渡すことができません

Question

私は、プロジェクト内で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[]'を入力して割り当てることができない、そのタイプを示すエラーを取得しておきます。第1のインスタンスと比較すると、第2のインスタンスに中カッコがないことに注目してください。

TypescriptまたはReactのいずれかで、私はTypescriptが、予想通りに配列を渡すのではなく、オブジェクトに配列を貼り付けているようです。

私はここで間違っているかもしれないことを誰も理解できますか？

Answer 1

あなたが直接

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

アイテムも

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

短縮することができる

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

であるべき、あなたのItemTableに小道具を渡す必要はありません