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>
);

如何在Preact无状态组件上键入属性“键”

1 个答案: