How to prevent building app if component prop types are invalid?

问题

Here is a example for PropTypes:

import PropTypes from 'prop-types';

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

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

Now I use Greeting component as:

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

In this case, when I build app for deployment, no error is thrown & app is successfully built. But it give error in runtime & breaks down.

How can I add check to remove this problem & ensure no components are being built using wrong prop types.

回答1:

Your question arises from a misunderstanding of both the intent and implementation of PropTypes. PropTypes exists to provide configurable run-time validations of API usage. It does not perform static code analysis but rather validates usage at runtime.

To provide additional context, the concept predates the mainstream usage of many static analysis tools. Furthermore, even with the introduction of these tools, some prefer runtime validation approaches. One reason for this could be to retain tool chain simplicity. PropTypes validation works in vanilla JavaScript without any additional tools or languages. However, since you are using JSX, and therefore already have a complex tool chain that involves multiple languages, this consideration is less relevant. However, another reason to use PropTypes is, if you are building a library, you can still provide a level of validation to your consumers without requiring them to use the same, or for that matter any, of the static analysis tools you've chosen.

If you want to validate the correctness of your code before running it, you should use a static analysis tool. There are many options, and you may use multiple tools, but some examples include TypeScript, Flow, and Closure Compiler.

Note that any of these static analysis options are, by definition, orthogonal to PropTypes and so may be used together with them freely. Therefore, I'm not suggesting that you abandon the use of PropTypes, but rather that you add a static analysis tool that caters to your use case.

回答2:

My personal recommendation is using a static code analysis tool as Aluan Haddad mentioned.

If you don't want to use a static code analysis tool, you could try to make the code fail on tests using a tool like https://github.com/esphen/jest-prop-type-error. But this implies you should have tests covering the integration between different components completely.

I would not consider this as a final solution for this problem but could be helpful as a temporary solution for large codebases while migrating to a static code analysis tool.

回答3:

The idea behind react is component base. Prop-types is runtime type checking for React props and similar objects. You can use prop-types to document the intended types of properties passed to components.

In Greeting component, if you need name as a props, you have to define it on the prop-types. If name is required, you define it is required:

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

To use Greeting, you just call it and pass props to it. I don't think we need to check what we have pass into Greeting component.

来源：https://stackoverflow.com/questions/54712094/how-to-prevent-building-app-if-component-prop-types-are-invalid

标签

javascript

reactjs

react-proptypes