diff --git a/docs/rules/no-this-in-sfc.md b/docs/rules/no-this-in-sfc.md index 45760fe74b..e622408626 100644 --- a/docs/rules/no-this-in-sfc.md +++ b/docs/rules/no-this-in-sfc.md @@ -17,6 +17,15 @@ function Foo(props) { } ``` +```jsx +function Foo(props) { + const { bar } = this.props; + return ( +
{bar}
+ ); +} +``` + ```jsx function Foo(props, context) { return ( @@ -27,6 +36,18 @@ function Foo(props, context) { } ``` +```jsx +function Foo(props, context) { + const { foo } = this.context; + const { bar } = this.props; + return ( +
+ {foo ? bar : ''} +
+ ); +} +``` + ```jsx function Foo(props) { if (this.state.loading) { @@ -40,6 +61,21 @@ function Foo(props) { } ``` +```jsx +function Foo(props) { + const { loading } = this.state; + const { bar } = this.props; + if (loading) { + return ; + } + return ( +
+ {bar} +
+ ); +} +``` + The following patterns are **not** considered warnings: ```jsx @@ -50,6 +86,23 @@ function Foo(props) { } ``` +```jsx +function Foo(props) { + const { bar } = props; + return ( +
{bar}
+ ); +} +``` + +```jsx +function Foo({ bar }) { + return ( +
{bar}
+ ); +} +``` + ```jsx function Foo(props, context) { return ( @@ -59,3 +112,25 @@ function Foo(props, context) { ); } ``` + +```jsx +function Foo(props, context) { + const { foo } = context; + const { bar } = props; + return ( +
+ {foo ? bar : ''} +
+ ); +} +``` + +```jsx +function Foo({ bar }, { foo }) { + return ( +
+ {foo ? bar : ''} +
+ ); +} +```