Question

我正在尝试将此表从react转换为typescript。我想使其成为通用表组件，可以在其中使用每个数据。这是我在react中创建的表的一个示例，并且运行良好。在打字稿中，班级专家提供了一个我很难在这里应用的界面。该表必须能够接受来自Web服务的数据并可以在任何时间显示。我应该添加什么。

class Table extends Component {
    render() {
        const { characterData, removeCharacter } = this.props;

        return (
            <table className="table-bordered table-striped">
                <TableHeader />
                <TableBody characterData={characterData}
                        removeCharacter={removeCharacter}
                />
            </table>
        );
    }

}
const TableHeader = () => { 
    return (
        <thead>
            <tr>
                <th width="300">Name</th>
                <th width="300">Job</th>
                <th width="300">Date</th>
            </tr>
        </thead>
    );
}
const TableBody = props => { 
    const rows = props.characterData.map((row, index) => {
        return (
            <tr key={index}>
                <td >{row.name}</td>
                <td >{row.job}</td>
                <td >{row.date}</td>
                <td><button onClick={() => props.removeCharacter(index)}>Delete</button></td>
            </tr>
        );
    });


    return <tbody>{rows}</tbody>;
}
export default Table;

Answer 1

您可以通过在Component原型旁边添加人字形来键入检查道具的类型。第一个参数是检查道具的类型，第二个参数将检查道具的内部状态。

interface TableProps {
  characterData: //...however the data should be structured
  removeCharacter: () => void;
}

interface TableState {
   //... this is empty because you haven't defined any internal component state
}

class Table extends Component<TableProps, TableState> {
    render() {
        const { characterData, removeCharacter } = this.props;
        return (
            <table className="table-bordered table-striped">
                <TableHeader />
                <TableBody characterData={characterData}
                        removeCharacter={removeCharacter}
                />
            </table>
        );
    }

}

在react和Typescript中创建一个组件

1 个答案: