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[]'을 입력 할당 할 수 없습니다 유형을 나타내는 오류가 계속. 첫 번째 인스턴스와 비교할 때 두 번째 인스턴스에서 중괄호가 없음을 확인하십시오.

Typescript 또는 React 중 하나를 Typescript, 예상대로 배열을 전달하는 대신 개체에 분명히 배열을 붙어 것으로 가정합니다.

내가 여기서 잘못했을 수도있는 사람을 알아낼 수 있습니까?

Answer 1

는 직접

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

될 경우, 귀하의 ItemTable에 소품을 통과하지 않는 항목이 필요 또한

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

으로 단축 할 수

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