reactjs - 如何从 React 功能组件声明 TypeScript 静态方法

Question

我需要从 React 中的功能组件引用静态方法。我在这里做了一个我想做的小例子(它在 JavaScript 中有效)。我遇到的错误在第 10 行 const x = ...

TS2339: Property 'GetMyArray' does not exist on type 'FunctionComponent'.

import React, {FunctionComponent} from 'react';

interface Props {
    isLoading?: boolean,
}

const Speakers : FunctionComponent<Props> = ({isLoading}) => {

    if (isLoading) {
        const x = Speakers.GetMyArray();
        return (
            <div>{JSON.stringify({x})}</div>
        );
    } else {
        return <div></div>;
    }
};

Speakers.GetMyArray = () => {
    return [1,2,3,4]
};

export default Speakers

Answer 1

使用类组件会更容易做到这一点，因为可以在类定义中推断出 static 函数和属性类型。

class Speakers extends React.Component<Props> {
  static GetMyArray = () => [1, 2, 3, 4]

  render() {
    const { isLoading } = this.props
    if (isLoading) {
      const x = Speakers.GetMyArray(); // works great
      return (
        <div>{JSON.stringify({x})}</div>
      );
    } else {
      return <div></div>;
    }
  }
}

也就是说，您可以扩展 React.SFC 或使用交集类型:

const Speakers: React.SFC<Props> & { GetMyArray?: () => number[]; } = (props) => {
  const { isLoading } = props
  if (isLoading) {
    const x = Speakers.GetMyArray!(); // works, sorta
    return (
      <div>{JSON.stringify({x})}</div>
    );
  } else {
    return <div></div>;
  }
}

你必须将 GetMyArray 标记为可选，因为你不能在定义函数的同时定义它，所以你必须使用 !运算符(或检查函数是否存在)调用静态函数时。 Speakers.GetMyArray!(); 中的 ! 告诉类型检查器您知道自己在做什么，而 GetMyArray 确实不是 未定义。参见 here阅读非空断言运算符

更新

我没有看到使用 React.FC 现在是使用函数组件的首选方式，因为函数组件不再被认为是无状态的。

如果你可以只使用 const Speakers = (props: Props) => ... 那么将 TypeScript 升级到 3.1 可能是你最好的选择!