Question

我对React和Typescript很陌生。这是输入FunctionComponent的正确方法吗？

type ModalProps = {
  children: ReactElement<any>;
  show: boolean;
  modalClosed(): void;
};

const modal: FunctionComponent<ModalProps> = ({
  children,
  modalClosed,
  show
}) => (
  <Aux>
    <Backdrop show={show} clicked={modalClosed} />
    <div>{children}</div>
  </Aux>
);

Answer 1

尽管这很好，但我还是根据网上看到的示例/仓库推荐以下内容。

首先，使用interface代替type

interface ModalProps {
  children: ReactElement<any>;
  show: boolean;
  modalClosed(): void;
}

这使扩展界面更加容易。例如，如果使用MaterialUI

interface ModalProps extends WithStyles<typeof modalStyles> {
  children: ReactElement<any>;
  show: boolean;
  modalClosed(): void;
};

第二，尽管我不确定背后是否有正当理由，但我看到了以下以多种方式键入功能组件的方法。

const modal = ({
  children,
  modalClosed,
  show
} : ModalProps) => (
  <Aux>
    <Backdrop show={show} clicked={modalClosed} />
    <div>{children}</div>
  </Aux>
);

编辑：我要补充的最后一件事，就是声明函数的方式，它比规则更像是一个标准。

modalClosed: () => void;

以正确的方式反应打字稿来键入FunctionComponent

1 个答案: