时间戳

首页 > 解决方案 > 如何从 React 功能组件声明 TypeScript 静态方法

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

问题描述

我需要从我的 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

标签： reactjstypescript

解决方案

使用类组件会更容易做到这一点，因为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!();您知道自己在做什么，而事实GetMyArray并非如此undefined。请参阅此处以了解非空断言运算符

更新

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

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

推荐阅读