Add more documentation for no-this-in-sfc

pointblack · Nov 20, 2017 · dfa5005 · dfa5005
1 parent 80fb96c
commit dfa5005
Showing 1 changed file with 75 additions and 0 deletions.
diff --git 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 (
+    <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>
+  );
+}
+```