在react和typescript中创建组件
在react和typescript中创建组件
提问于 2018-11-29 00:45:59
我正在尝试将下面的表格从react转换为typescript。我想让它成为通用的表格组件，这样我就可以为每个数据使用它。这是一个示例，我在react中创建了一个表，它工作得很好。在typescript中，类专家我发现很难应用here.The表的接口必须能够接受来自any服务的数据并在任何时候显示。我还能加上什么。
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;Stack Overflow用户
发布于 2018-11-29 00:55:10
您可以通过在组件原型旁边添加chevrons来输入check your props。第一个参数是类型检查你的道具，第二个参数将类型检查你的内部状态。
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>
);
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53524301
复制相关文章
相似问题
腾讯云开发者
