我如何在 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 (将#修改为@）