如何在 Preact 无状态组件上输入 属性 'key'

Question

这是无状态组件：

interface Props {
  children: JSX.Element;
  title: string;
  isHidden: boolean;
}

function TabContent({ children, title, isHidden }: Props): JSX.Element {
  return (
    <section
      id={title}
      hidden={isHidden}
    >
      {children}
    </section>
  );
}

export default TabContent;

然后我像这样 map 消费它：

createTabContent = tabs => {
    return tabs.map((tab, id) => (
      <TabContent key={id} title={tab.title} isHidden={!(this.state.activeTab === id)}>
        {tab}
      </TabContent>
    ));
  };

但是 Typescript 抱怨 Property 'key' does not exist on type Props。

我研究了如何在 React 中输入无状态组件，例如 guide。它们都需要访问 React 模块，但我使用的是 Preact..

Answer 1

Preact 有类似 React 的组件typings。所以你可以使用 ComponentType、FunctionComponent、FunctionalComponent:

之一

import { FunctionalComponent } from 'preact';

const TabContent: FunctionalComponent<Props> = ({ children, title, isHidden }) => (
    <section
        id={title}
        hidden={isHidden}
    >
        {children}
    </section>
);