Add more documentation for no-this-in-sfc

Author: jomasti

docs/rules/no-this-in-sfc.md

@@ -17,6 +17,15 @@ function Foo(props) {
 }
 ```
 
+```jsx
+function Foo(props) {
+  const { bar } = this.props;
+  return (
+    <div>{bar}</div>
+  );
+}
+```
+
 ```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 (
+    <div>
+      {foo ? bar : ''}
+    </div>
+  );
+}
+```
+
 ```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 <Loader />;
+  }
+  return (
+    <div>
+      {bar}
+    </div>
+  );
+}
+```
+
 The following patterns are **not** considered warnings:
 
 ```jsx
@@ -50,6 +86,23 @@ function Foo(props) {
 }
 ```
 
+```jsx
+function Foo(props) {
+  const { bar } = props;
+  return (
+    <div>{bar}</div>
+  );
+}
+```
+
+```jsx
+function Foo({ bar }) {
+  return (
+    <div>{bar}</div>
+  );
+}
+```
+
 ```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 (
+    <div>
+      {foo ? bar : ''}
+    </div>
+  );
+}
+```
+
+```jsx
+function Foo({ bar }, { foo }) {
+  return (
+    <div>
+      {foo ? bar : ''}
+    </div>
+  );
+}
+```