TypeScript

Question

我有一个可重用的 React 组件。它有一些道具，接受一个通用的。这是组件：

export interface MappedObject {
  key: string;
  name: string;
  type: string;
  status: AppStatus;
}
export interface IProps<T> extends MappedObject {
  listing: T[];
  listingName: string;
  listingType?: boolean;
  listingStatus?: boolean;
}

我希望我的可重用组件在引用 Props 时接受通用。

const AssociatedTableList: <T>(props: IProps<T>) => ReactElement<IProps<T>> = ({
  listing,
  listingName,
  listingType,
  listingStatus
}) => {
  const isListingAvailable = isEmpty(Array.isArray(listing));

  return (
    <Fragment>
      {isListingAvailable && `There are no associated ${listingName} yet`}
      {isListingAvailable && (
        <table
          className="table table-borderless table-striped table-small"
          data-test="connections-listing-table"
        >
          <thead className="text-color-light-gray">
            <tr>
              <th>{`${listingName}`} Name</th>
              {listingType && <th>Type</th>}
              {listingStatus && <th>Status</th>}
            </tr>
          </thead>
          <tbody>
            {listing.map(({ type, status, name, key }) => ( // The error is in this properties
              <tr key={key} data-test="connections-listing-row">
                <td className="text-primary font-weight-medium w-25">{name}</td>
                <td>{type}</td>
                <td>{status}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </Fragment>
  );
};

但是我得到以下错误：

Cannot find name T

我试过像这样 T = {} 或 T as any 扩展它，但没有成功。我阅读了有关扩展它的信息，但我希望它可以被任何人重复使用。我渴望拥有一种类型，它可以接受所有可用类型并像 T extends AvailableGenericTypes.

一样扩展它

你知道我该怎么做吗？非常感谢..

Answer 1

您在函数之前缺少通用约束：

const AssociatedTableList: <T>(p: IProps<T>) => React.ReactElement<IProps<T>> = ({ 
    list,
    listItem,
    listItemName,
    listItemStatus,
    listItemType
}) => {
    // your code
};

我个人更喜欢普通函数，因为它们在使用泛型时更具可读性：

function AssociatedTableList<T>(props: IProps<T>): React.ReactElement<IProps<T>> {
    // your code
}

TypeScript - 如何在可重复使用的 React 组件中使用泛型

TypeScript - How to use Generic in a Re-Usable React Component

generics

reactjs

react-props