diff --git a/docs/rules/prop-types.md b/docs/rules/prop-types.md index 7dea535f04..88edd81e16 100644 --- a/docs/rules/prop-types.md +++ b/docs/rules/prop-types.md @@ -9,29 +9,43 @@ It can warn other developers if they make a mistake while reusing the component The following patterns are considered warnings: ```jsx -var Hello = createReactClass({ - render: function() { - return
Hello {this.props.name}
; - } -}); +function Hello({ name }) { + return
Hello {name}
; + // 'name' is missing in props validation +} var Hello = createReactClass({ propTypes: { firstname: PropTypes.string.isRequired }, render: function() { - return
Hello {this.props.firstname} {this.props.lastname}
; // lastname type is not defined in propTypes + return
Hello {this.props.firstname} {this.props.lastname}
; + // 'lastname' type is missing in props validation } }); -function Hello({ name }) { - return
Hello {name}
; +// Or in ES6 +class Hello extends React.Component { + render() { + return
Hello {this.props.firstname} {this.props.lastname}
; + // 'lastname' type is missing in props validation + } +} +Hello.propTypes = { + firstname: PropTypes.string.isRequired } ``` Examples of correct usage without warnings: ```jsx +function Hello({ name }) { + return
Hello {name}
; +} +Hello.propTypes = { + name: PropTypes.string.isRequired +} + var Hello = createReactClass({ propTypes: { name: PropTypes.string.isRequired, @@ -65,35 +79,15 @@ class HelloEs6WithPublicClassField extends React.Component { The following patterns are **not** considered warnings: ```jsx -var Hello = createReactClass({ - render: function() { - return
Hello World
; - } -}); - -var Hello = createReactClass({ - propTypes: { - name: PropTypes.string.isRequired - }, - render: function() { - return
Hello {this.props.name}
; - } -}); +function Hello() { + return
Hello World
; +} // Referencing an external object disable the rule for the component -var Hello = createReactClass({ - propTypes: myPropTypes, - render: function() { - return
Hello {this.props.name}
; - } -}); - function Hello({ name }) { return
Hello {name}
; } -Hello.propTypes = { - name: PropTypes.string.isRequired, -}; +Hello.propTypes = myPropTypes; ``` ## Rule Options @@ -135,6 +129,6 @@ For this rule to work we need to detect React components, this could be very har For now we should detect components created with: +* a function that return JSX or the result of a `React.createElement` call. * `createReactClass()` * an ES6 class that inherit from `React.Component` or `Component` -* a stateless function that return JSX or the result of a `React.createElement` call.