Question

我从ReactJs转到React-Native并找到了这个函数结构in facebook's code for a react-native button：

class Button extends React.Component<{
  title: string,
  onPress: () => any,
  color?: ?string,
  hasTVPreferredFocus?: ?boolean,
  accessibilityLabel?: ?string,
  disabled?: ?boolean,
  testID?: ?string,
}> {
  static propTypes = {
    /**
     * Text to display inside the button
     */
    title: PropTypes.string.isRequired,
    /**
     * Text to display for blindness accessibility features
     */
    accessibilityLabel: PropTypes.string,
    /**
     * Color of the text (iOS), or background color of the button (Android)
     */
    color: ColorPropType,
    /**
     * If true, disable all interactions for this component.
     */
    disabled: PropTypes.bool,
    /**
     * TV preferred focus (see documentation for the View component).
     */
    hasTVPreferredFocus: PropTypes.bool,
    /**
     * Handler to be called when the user taps the button
     */
    onPress: PropTypes.func.isRequired,
    /**
     * Used to locate this view in end-to-end tests.
     */
    testID: PropTypes.string,
  };

  ...
}

在ReactJS中，我只使用propTypes检查来构建我的组件，所以：

a）在类定义的括号内使用道具规范的目的是什么（＆lt; {...}＆gt;？这在普通的ReactJS中是否也可用？

b）是否会检查传递的属性格式？如果是这样，为什么我在这里需要propTypes？

Answer 1

为了清楚起见，括号内定义的正确术语称为泛型，当函数/类/任何东西不确定某事物的类型是什么时，它就像一个类型参数，因此它可以让你填写空白 - 在这种情况下，组件的道具的类型。

特别是，此语法看起来像Flow，但TypeScript也是类型检查的常用选项。

所以：

泛型用于在编译时使用组件进行类型检查。这是类型为checkers的语法，并且在普通的JS中不可用。
propTypes用于在运行时检查类型，以便为不使用类型系统的用户改进DX。

通常，具有类型系统的项目仅选择使用泛型来减少冗长，如果您使用的是类型系统，则只有在向公众发布组件时才需要propTypes。

Answer 2

Facebook使用Flow（您可以在源代码的顶部看到注释）进行静态分析。您可以使用Typescript或任何其他分析器。定义itertools.groupby类型的主要目标是防止编程错误。阅读更多here

React组件需要2个通用parameters props。

道具类型
上下文

React.Component也有一些静态属性，如

React.Component<PropType, context> {}定义了此组件可以采用的道具。
propTypes定义道具的默认值（如果它们未从父项传递。

来到你的问题：

将道具规范置于其中的目的是什么？类定义中的括号＆lt; {...}＆gt;？

定义组件可以采用的道具，用于静态分析和所需道具的错误报告（如果未通过）。

这在普通的ReactJS中也可用吗？

是（您必须在项目中添加Flow或TypeScript）

是否会检查传递的属性格式。如果是这样，为什么我在这里需要propTypes？

是的，有时在编译时无法推断出道具的类型，那么看到使用defaultProps生成的任何警告会很有用。 Credit

ReactJS属性验证

2 个答案: