如果组件道具类型无效，如何防止构建应用程序？

Question

以下是PropTypes的示例：

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

现在我使用Greeting组件：

<Greetings otherProp="this is a invalid prop" />

在这种情况下，当我构建用于部署的应用程序时，不会抛出任何错误并成功构建应用程序。但它会在运行时出错并发生故障。

如何添加检查以消除此问题并确保没有使用错误的prop类型构建组件。

Answer 1

您的问题源于对PropTypes的意图和实现的误解。 PropTypes的存在是为了提供API使用的可配置运行时验证。它们不执行静态代码分析，而是在运行时验证使用情况。

为了提供额外的上下文，该概念早于许多静态分析工具的主流使用。此外，即使引入了这些工具，一些人也更喜欢运行时验证方法。其中一个原因可能是保持工具链的简单性。 PropTypes验证适用于vanilla JavaScript，无需任何其他工具或语言。但是，由于您使用的是JSX，因此已经有一个涉及多种语言的复杂工具链，因此这种考虑不太重要。但是，使用PropTypes的另一个原因是，如果您正在构建库，您仍然可以为您的消费者提供一定级别的验证，而不要求他们使用您选择的静态分析工具，或者任何其他方面。 。

如果要在运行代码之前验证代码的正确性，则应使用静态分析工具。有很多选项，你可以使用多种工具，但有些例子包括TypeScript，Flow和Closure Compiler。

注意，根据定义，这些静态分析选项中的任何一个都与PropTypes正交，因此可以与它们一起自由使用。

Answer 2

我个人的建议是使用静态代码分析工具，如Aluan Haddad所述。

如果您不想使用静态代码分析工具，可以尝试使用https://github.com/esphen/jest-prop-type-error等工具使代码失败。但这意味着您应该完全覆盖不同组件之间的集成测试。

我不认为这是这个问题的最终解决方案，但在迁移到静态代码分析工具时可以作为大型代码库的临时解决方案。

Answer 3

反应背后的想法是组件基础。 Prop-types是React props和类似对象的运行时类型检查。您可以使用prop-types来记录传递给组件的预期属性类型。

在Greeting组件中，如果你需要name作为道具，你必须在prop-types上定义它。如果需要name，则需要定义它：

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

要使用Greeting，您只需调用它并将道具传递给它。我认为我们不需要检查我们传递给Greeting组件的内容。