javascript - 如果组件 Prop 类型无效，如何防止构建应用程序？

这是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类型构建任何组件。

最佳答案

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

为了提供更多的上下文，该概念先于许多静态分析工具的主流使用。此外，即使引入了这些工具，还是有些人更喜欢运行时验证方法。原因之一可能是保留工具链的简单性。 PropTypes验证可在原始JavaScript中使用，而无需任何其他工具或语言。但是，由于您使用的是JSX，因此已经具有涉及多种语言的复杂工具链，因此此考虑的相关性较小。但是，使用PropTypes的另一个原因是，如果您正在构建库，则仍可以为使用者提供一定级别的验证，而无需他们使用您选择的相同或任何原因的静态分析工具。

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

请注意，根据定义，这些静态分析选项中的任何一个都与PropTypes正交，因此可以自由地与它们一起使用。因此，我不建议您放弃使用PropTypes，而是建议您添加一个可以满足用例需求的静态分析工具。

关于javascript - 如果组件 Prop 类型无效，如何防止构建应用程序？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54712094/