Question

我今天使用React Native 0.51.0开始了一个新项目，并注意到默认项目文件的类语法添加了一些新内容，<{}>之后的extends Component语法：

export default class App extends Component<{}> {
   ...
}

我尝试做研究，但大多数搜索引擎都会忽略特殊字符，即使是精确的字符串匹配，所以试图找出这种语法是很困难的。我做了一些测试，并且能够发现这个变化出现在v0.49.0中。 release notes没有提到这个添加语法的功能。

许多模糊的关键字搜索和阅读让我相信这可能是与TypeScript相关的语法，但由于不熟悉该语言，我不知道如何搜索和了解更多关于语法不知道它的正确用语是什么。谁能告诉我语法的名称及其作用？特别是关于React Native。

Answer 1

与您在组件中收到的道具的Flow类型相关。 Component<{}>意味着您不希望该组件接收道具。

使用Flow和React.Component，您可以定义props和state的类型（有关详细信息，请参阅React$Component类型声明）。

流程documentation中有关React组件的示例

import * as React from 'react';

type Props = { /* ... */ };

type State = {
  count: number,
};

class MyComponent extends React.Component<Props, State> {
  state = {
    count: 0,
  };

  componentDidMount() {
    setInterval(() => {
      this.setState(prevState => ({
        count: prevState.count + 1,
      }));
    }, 1000);
  }

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

<MyComponent />;

什么是＆lt; {}＆gt;扩展Component后的语法？

1 个答案: