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

Question

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

TS2339：“FunctionComponent”类型上不存在属性“GetMyArray”。

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为可选，因为您不能在定义函数的同时定义它，因此!在调用静态函数时必须使用运算符（或检查该函数是否存在）。in告诉类型检查器您知道自己在做什么，但事实!并非如此。请参阅此处了解非空断言运算符Speakers.GetMyArray!();GetMyArrayundefined

更新

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

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

Answer 2

我的回答并不完全符合你的问题。但我认为对于想要向功能组件添加静态组件的人来说会有帮助。

import React from 'react';
import { Text } from 'react-native';
import Group, { RadioButtonGroupProps } from './Group';

type RadioButtonType = {
  text: string,
};

interface StaticComponents {
  Group?: React.FC<RadioButtonGroupProps>
}

const RadioButton: React.FC<RadioButtonType> & StaticComponents = 
({ text }) => (<Text>{text}</Text>);

RadioButton.Group = Group;

export default RadioButton;

如果你想直接而不是记住这样的配置import React from 'react'import * React from 'react'

成就：

Answer 3

从 TS 版本 3.1 开始，您应该可以使用它（请参阅“函数的属性声明”部分）