reactjs 如何在typescript中动态地将接口/类型传递给一个通用的react函数

mdfafbf1  于 2022-12-26  发布在  React
关注(0)|答案(1)|浏览(146)

我创建了一个通用函数来呈现一个表。
Table.tsx

interface Type {
  name: string;
  age: number;
}

interface PropType {
  column: Array<Type>;
}

function Table({ column }: PropType) {
  return null;
}

export default Table;

现在,我将此组件用于两个不同的页面,用户和产品。用户和产品页面都有不同的数据要在表组件上呈现
User.tsx

import Table from "./Table";

interface InterfaceUser {
  name: string;
  age: number;
}

const users: Array<InterfaceUser> = [
  {
    name: "John",
    age: 21
  }
];
function User() {
  return <Table column={users} />;
}
export default User;

User.tsx运行良好,因为我们在表组件中创建了相同的接口,但当它进入Product.tsx页面时,我们得到错误。

import Table from "./Table";

interface InterfaceProduct {
  title: string;
  age: number;
}

const products: Array<InterfaceProduct> = [
  {
    title: "Product name",
    price: 21
  }
];
function Product() {
  return <Table column={products} />;
}
export default Product;

我是新的 typescript ,任何帮助将不胜感激。

rdlzhqv9

rdlzhqv91#

可以像这样使用Typescript泛型类型:
Table.tsx中:

interface PropType<ColumnsType> {
  column: ColumnsType[];
}

function Table<ColumnType>({ column }: PropType<ColumnType>) {
  return null;
}

User.tsx中:

function User() {
  return <Table<InterfaceUser> column={users} />;
}

Product.tsx中:

function Product() {
  return <Table<InterfaceProduct> column={products} />;
}

相关问题