feat:Decoupling component dependency

src/components/Exception/index.js

 import React, { createElement } from 'react';
-import { injectIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { Button } from 'antd';
 import config from './typeConfig';
 import styles from './index.less';
 
-const Exception = ({ className, linkElement = 'a', type, title, desc, img, actions, ...rest }) => {
-  const pageType = type in config ? type : '404';
-  const clsString = classNames(styles.exception, className);
-  return (
-    <div className={clsString} {...rest}>
-      <div className={styles.imgBlock}>
-        <div
-          className={styles.imgEle}
-          style={{ backgroundImage: `url(${img || config[pageType].img})` }}
-        />
-      </div>
-      <div className={styles.content}>
-        <h1>{title || config[pageType].title}</h1>
-        <div className={styles.desc}>{desc || config[pageType].desc}</div>
-        <div className={styles.actions}>
-          {actions ||
-            createElement(
-              linkElement,
-              {
-                to: '/',
-                href: '/',
-              },
-              <Button type="primary">
-                <FormattedMessage id="app.exception.back" defaultMessage="Back to home" />
-              </Button>
-            )}
+class Excrption extends React.PureComponent {
+  static defaultProps = {
+    backText: 'back to home',
+  };
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    const {
+      className,
+      backText,
+      linkElement = 'a',
+      type,
+      title,
+      desc,
+      img,
+      actions,
+      ...rest
+    } = this.props;
+    const pageType = type in config ? type : '404';
+    const clsString = classNames(styles.exception, className);
+    return (
+      <div className={clsString} {...rest}>
+        <div className={styles.imgBlock}>
+          <div
+            className={styles.imgEle}
+            style={{ backgroundImage: `url(${img || config[pageType].img})` }}
+          />
+        </div>
+        <div className={styles.content}>
+          <h1>{title || config[pageType].title}</h1>
+          <div className={styles.desc}>{desc || config[pageType].desc}</div>
+          <div className={styles.actions}>
+            {actions ||
+              createElement(
+                linkElement,
+                {
+                  to: '/',
+                  href: '/',
+                },
+                <Button type="primary">{backText}</Button>
+              )}
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
-export default injectIntl(Exception);
+export default Excrption;

src/locales/en-US.js

@@ -36,7 +36,7 @@ export default {
   'menu.account.settings': 'Account Settings',
   'menu.account.trigger': 'Trigger Error',
   'app.home.introduce': 'introduce',
-  'app.analysis.test': 'Gongzhuan road No.{no} shop',
+  'app.analysis.test': 'Gongzhuan No.{no} shop',
   'app.analysis.introduce': 'Introduce',
   'app.analysis.total-sales': 'total sales',
   'app.analysis.day-sales': 'Day Sales',

src/pages/Exception/403.js

@@ -11,6 +11,7 @@ class Exception403 extends Component {
         desc={formatMessage({ id: 'app.exception.description.403' }, {})}
         style={{ minHeight: 500, height: '80%' }}
         linkElement={Link}
+        backText={formatMessage({ id: 'app.exception.back' })}
       />
     );
   }

src/pages/Exception/404.js

@@ -11,6 +11,7 @@ class Exception404 extends Component {
         desc={formatMessage({ id: 'app.exception.description.404' }, {})}
         style={{ minHeight: 500, height: '80%' }}
         linkElement={Link}
+        backText={formatMessage({ id: 'app.exception.back' })}
       />
     );
   }

src/pages/Exception/500.js

@@ -11,6 +11,7 @@ class Exception500 extends Component {
         desc={formatMessage({ id: 'app.exception.description.500' }, {})}
         style={{ minHeight: 500, height: '80%' }}
         linkElement={Link}
+        backText={formatMessage({ id: 'app.exception.back' })}
       />
     );
   }