Reactjs 如何制作基于对象 struct 呈现数据的可重用组件

1. 您不需要将类型传递给InfoBlock组件.

2. 原始媒体类型中的数据应为数字.

3. 使用图标作为Reaction组件.

希望能有所帮助.

类型:

export type Dataset = {
  author: string;
  date: number;
  rawMedias: string;
  face: string;
};

export type RawMedia = {
  s3Source: string;
  author: string;
  date: number;
  face: string;
};

InfoBlock组件:

const INFO_BLOCK_ITEMS = {
  author: {
    label: "Author",
    icon: <AccountTreeIcon />
  },
  date: {
    label: "Created",
    icon: <FaceRetouchingNaturalIcon />
  },
  rawMedias: {
    label: "RAW Medias",
    icon: <InsertDriveFileOutlinedIcon />
  },
  face: {
    label: "Faces",
    icon: <ScheduleOutlinedIcon />,
    action: () => console.log("If no data then button renders")
  },
  s3Source: {
    label: "S3 Source",
    icon: <AcUnitIcon />
  }
};

interface IInfoBlockProps {
  data: Dataset | RawMedia;
}

function InfoBlock({ data }: IInfoBlockProps) {
  return(
    <Stack gap={"20px"}>
      {
        Object.keys(data).map((key, _index) => {
          const infoBlockItem = INFO_BLOCK_ITEMS[key];
          return (
            <Stack key={_index} direction={"row"} gap={"10px"}>
              {infoBlockItem.icon}
              <Stack direction={"row"} gap={"20px"}>
                <Typography>{infoBlockItem.label}</Typography>
                <Typography>{data[key]}</Typography>
              </Stack>
            </Stack>
          );
        })
      }
    </Stack>
  )
}

应用程序组件:

const DATASET = {
  author: "extrauser@example.com",
  date: 1669208819.837662,
  rawMedias: "Video name 1, Video name 2, Video name 3",
  face: ""
};

const RAW_MEDIA = {
  s3Source: "https://example.com",
  author: "extrauser@example.com",
  date: 1669208819.837662,
  face: "Some face"
};

function App() {
  return (
    <div>
      <InfoBlock data={DATASET} />
      <InfoBlock data={RAW_MEDIA} />
    </div>
  );
}