refactor(Empty): 使用函数组件替换Class组件

panbibi · panbibi · commit f944c63fab33 · 2023-02-17T10:36:26.000+08:00
diff --git a/example/examples/src/routes/Empty/index.tsx b/example/examples/src/routes/Empty/index.tsx
@@ -31,35 +31,33 @@ const xml = `
 
 export interface DividerViewProps extends ComProps {}
 
-export default class DividerView extends React.Component<DividerViewProps> {
-  render() {
-    const {route} = this.props;
-    const description = route.params.description;
-    const title = route.params.title;
-    return (
-      <Container>
-        <Layout>
-          <Header title={title} description={description} />
-          <Body>
-            <Card title="默认基础实例">
-              <Empty />
-            </Card>
-            <Card title="自定义文字 label?: string">
-              <Empty label="冇得数据咯" />
-            </Card>
-            <Card title="替换默认图标 xml?: string;">
-              <Empty label="冇得数据咯" xml={xml} />
-            </Card>
-            <Card title="自定义图标尺寸 size?: number">
-              <Empty label="冇得数据咯" size={120} />
-            </Card>
-            <Card title="自定义文字样式 labelStyle?: TextProps['style']">
-              <Empty label="冇得数据咯" labelStyle={{color: 'red'}} />
-            </Card>
-          </Body>
-          <Footer />
-        </Layout>
-      </Container>
-    );
-  }
+export default function DividerView(props: DividerViewProps) {
+  const {route} = props || {};
+  const description = route.params.description;
+  const title = route.params.title;
+  return (
+    <Container>
+      <Layout>
+        <Header title={title} description={description} />
+        <Body>
+          <Card title="默认基础实例">
+            <Empty />
+          </Card>
+          <Card title="自定义文字 label?: string">
+            <Empty label="冇得数据咯" />
+          </Card>
+          <Card title="替换默认图标 xml?: string;">
+            <Empty label="冇得数据咯" xml={xml} />
+          </Card>
+          <Card title="自定义图标尺寸 size?: number">
+            <Empty label="冇得数据咯" size={120} />
+          </Card>
+          <Card title="自定义文字样式 labelStyle?: TextProps['style']">
+            <Empty label="冇得数据咯" labelStyle={{color: 'red'}} />
+          </Card>
+        </Body>
+        <Footer />
+      </Layout>
+    </Container>
+  );
 }
diff --git a/packages/core/src/Empty/README.md b/packages/core/src/Empty/README.md
@@ -11,13 +11,14 @@ Empty 空状态
 ```js
 import { Empty } from '@uiw/react-native';
 
-class Demo extends Component {
+const Demo = () => {
   render() {
     return (
       <Empty />
     )
   }
 }
+export default Demo
 ```
 <!--End-->
 
@@ -27,13 +28,14 @@ class Demo extends Component {
 ```js
 import { Empty } from '@uiw/react-native';
 
-class Demo extends Component {
+const Demo = () => {
   render() {
     return (
       <Empty label="冇得数据咯"/>
     )
   }
 }
+export default Demo
 ```
 <!--End-->
 
@@ -67,13 +69,14 @@ const xml = `
 </svg>
 `;
 
-class Demo extends Component {
+const Demo = () => {
   render() {
     return (
       <Empty label="冇得数据咯" xml={xml}/>
     )
   }
 }
+export default Demo
 ```
 <!--End-->
 
@@ -83,13 +86,14 @@ class Demo extends Component {
 ```js
 import { Empty } from '@uiw/react-native';
 
-class Demo extends Component {
+const Demo = () => {
   render() {
     return (
       <Empty label="冇得数据咯" size={120} />
     )
   }
 }
+export default Demo
 ```
 <!--End-->
 
@@ -99,13 +103,14 @@ class Demo extends Component {
 ```js
 import { Empty } from '@uiw/react-native';
 
-class Demo extends Component {
+const Demo = () => {
   render() {
     return (
       <Empty label="冇得数据咯" labelStyle={{ color: 'red' }} />
     )
   }
 }
+export default Demo
 ```
 <!--End-->
 
@@ -116,7 +121,7 @@ class Demo extends Component {
 import { Empty } from '@uiw/react-native';
 import {View, Text } from 'react-native';
 
-class Demo extends Component {
+const Demo = () => {
   render() {
     return (
       <Empty>
@@ -127,6 +132,7 @@ class Demo extends Component {
     )
   }
 }
+export default Demo
 ```
 <!--End-->
 

Original file line number	Diff line number	Diff line change
`@@ -11,13 +11,14 @@ Empty 空状态`
`11`	`11`	```js
`12`	`12`	`import { Empty } from '@uiw/react-native';`
`13`	`13`
`14`		`-class Demo extends Component {`
	`14`	`+const Demo = () => {`
`15`	`15`	`render() {`
`16`	`16`	`return (`
`17`	`17`	`<Empty />`
`18`	`18`	`)`
`19`	`19`	`}`
`20`	`20`	`}`
	`21`	`+export default Demo`
`21`	`22`	```
`22`	`23`	`<!--End-->`
`23`	`24`
`@@ -27,13 +28,14 @@ class Demo extends Component {`
`27`	`28`	```js
`28`	`29`	`import { Empty } from '@uiw/react-native';`
`29`	`30`
`30`		`-class Demo extends Component {`
	`31`	`+const Demo = () => {`
`31`	`32`	`render() {`
`32`	`33`	`return (`
`33`	`34`	`<Empty label="冇得数据咯"/>`
`34`	`35`	`)`
`35`	`36`	`}`
`36`	`37`	`}`
	`38`	`+export default Demo`
`37`	`39`	```
`38`	`40`	`<!--End-->`
`39`	`41`
@@ -67,13 +69,14 @@ const xml = `
`67`	`69`	`</svg>`
`68`	`70`	`;
`69`	`71`
`70`		`-class Demo extends Component {`
	`72`	`+const Demo = () => {`
`71`	`73`	`render() {`
`72`	`74`	`return (`
`73`	`75`	`<Empty label="冇得数据咯" xml={xml}/>`
`74`	`76`	`)`
`75`	`77`	`}`
`76`	`78`	`}`
	`79`	`+export default Demo`
`77`	`80`	```
`78`	`81`	`<!--End-->`
`79`	`82`
`@@ -83,13 +86,14 @@ class Demo extends Component {`
`83`	`86`	```js
`84`	`87`	`import { Empty } from '@uiw/react-native';`
`85`	`88`
`86`		`-class Demo extends Component {`
	`89`	`+const Demo = () => {`
`87`	`90`	`render() {`
`88`	`91`	`return (`
`89`	`92`	`<Empty label="冇得数据咯" size={120} />`
`90`	`93`	`)`
`91`	`94`	`}`
`92`	`95`	`}`
	`96`	`+export default Demo`
`93`	`97`	```
`94`	`98`	`<!--End-->`
`95`	`99`
`@@ -99,13 +103,14 @@ class Demo extends Component {`
`99`	`103`	```js
`100`	`104`	`import { Empty } from '@uiw/react-native';`
`101`	`105`
`102`		`-class Demo extends Component {`
	`106`	`+const Demo = () => {`
`103`	`107`	`render() {`
`104`	`108`	`return (`
`105`	`109`	`<Empty label="冇得数据咯" labelStyle={{ color: 'red' }} />`
`106`	`110`	`)`
`107`	`111`	`}`
`108`	`112`	`}`
	`113`	`+export default Demo`
`109`	`114`	```
`110`	`115`	`<!--End-->`
`111`	`116`
`@@ -116,7 +121,7 @@ class Demo extends Component {`
`116`	`121`	`import { Empty } from '@uiw/react-native';`
`117`	`122`	`import {View, Text } from 'react-native';`
`118`	`123`
`119`		`-class Demo extends Component {`
	`124`	`+const Demo = () => {`
`120`	`125`	`render() {`
`121`	`126`	`return (`
`122`	`127`	`<Empty>`
`@@ -127,6 +132,7 @@ class Demo extends Component {`
`127`	`132`	`)`
`128`	`133`	`}`
`129`	`134`	`}`
	`135`	`+export default Demo`
`130`	`136`	```
`131`	`137`	`<!--End-->`
`132`	`138`