如何解决我如何在 Typescript React Functional 组件中传递一个数组对象作为道具
我创建了表格组件,我想让它在其他组件中重复使用。例如,在一个组件中,我将拥有最新的工作表,但在另一个组件中,我将拥有客户表列表。所以我想在道具属性中添加例如名称为 tableTitle 的对象或数组类型。所以我可以在组件中进一步映射该对象。这是我的代码:
import React,{ FC } from 'react';
import styles from './Table.module.scss';
import Grid from '../../hoc/layout/Grid';
import Title from '../../components/Title';
import {
Table as MuiTable,TableBody,TableCell,TableHead,TableRow,} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
Table: {
minWidth: 500,},});
interface Props {
title: string;
titleIcon: string;
tableTitle?: [];
}
const Table: FC<Props> = ({ title,titleIcon,tableTitle }: Props) => {
const classes = useStyles();
return (
<Grid xs={12} sm={12} md={12} lg={12}>
<Title title={title} icon={titleIcon} />
<MuiTable className={classes.Table} aria-label="simple table">
<TableHead className={styles.TableHeader}>
{tableTitle.map((test) => (
<TableRow key={test.id}>
<TableCell className={styles.MyTable} align="center">
{test}
</TableCell>
<TableCell className={styles.MyTable} align="center"></TableCell>
</TableRow>
))}
</TableHead>
<TableBody>
<TableRow>
<TableCell className={styles.MyTable} align="center">
test
</TableCell>
</TableRow>
</TableBody>
</MuiTable>
</Grid>
);
};
export default Table;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。