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

Question

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

  

TS2339：类型上不存在属性“ GetMyArray”   “ 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

对于您的问题，我的答案并不确切。但是我认为这对希望在功能组件中添加静态组件的人会有所帮助。

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'，请记住像this这样的配置

成就：

Answer 2

您应该让它正常工作since TS version 3.1（请参见“函数的属性声明”一节）

Answer 3

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

class Speakers extends React.Component<Props> {
  static GetSpeakers = () => [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> & { GetSpeakers?: () => 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确实不是undefined。请参阅here，以了解有关非null断言运算符的信息

更新

我没有看到使用React.FC现在是使用功能组件的首选方法，因为不再可以认为功能组件是无状态的。

如果仅使用const Speakers = (props: Props) => ...就能摆脱困境，那么将TypeScript升级到3.1可能是最好的选择！

Answer 4

您可以编写一个使用自定义静态方法扩展React.FC的接口，然后将该接口分配给您的功能组件。

// Extends FC with custom static methods
interface ComponentWithStaticMethod<TProps> extends React.FC<TProps> {
  staticMethod: (value: string) => void;
}

// Your component with the interface
const Component: ComponentWithStaticMethod<{}> = () => {
  // Your component goes here...
  return null;
}

// Declare your static method for your functional component
Component.staticMethod = (value: string): void => {
  console.log(value);
}