refactor(result): useContext and improve code (#27128)

* refactor(result): useContext and improve code

* Update index.tsx

* Update index.tsx

components/result/index.tsx

@@ -5,7 +5,7 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import WarningFilled from '@ant-design/icons/WarningFilled';
 
-import { ConfigConsumerProps, ConfigConsumer } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
 
 import noFound from './noFound';
@@ -66,7 +66,6 @@ const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
       </div>
     );
   }
-
   const iconNode = React.createElement(
     IconMap[status as Exclude<ResultStatusType, ExceptionStatusType>],
   );
@@ -83,44 +82,36 @@ export interface ResultType extends React.FC<ResultProps> {
   PRESENTED_IMAGE_500: React.ReactNode;
 }
 
-const Result: ResultType = props => (
-  <ConfigConsumer>
-    {({ getPrefixCls, direction }: ConfigConsumerProps) => {
-      const {
-        prefixCls: customizePrefixCls,
-        className: customizeClassName,
-        subTitle,
-        title,
-        style,
-        children,
-        status,
-      } = props;
-      const prefixCls = getPrefixCls('result', customizePrefixCls);
-      const className = classNames(prefixCls, `${prefixCls}-${status}`, customizeClassName, {
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-      });
-      return (
-        <div className={className} style={style}>
-          {renderIcon(prefixCls, props)}
-          <div className={`${prefixCls}-title`}>{title}</div>
-          {subTitle && <div className={`${prefixCls}-subtitle`}>{subTitle}</div>}
-          {renderExtra(prefixCls, props)}
-          {children && <div className={`${prefixCls}-content`}>{children}</div>}
-        </div>
-      );
-    }}
-  </ConfigConsumer>
-);
-
-Result.defaultProps = {
-  status: 'info',
+const Result: ResultType = ({
+  prefixCls: customizePrefixCls,
+  className: customizeClassName,
+  subTitle,
+  title,
+  style,
+  children,
+  status = 'info',
+  icon,
+  extra,
+}) => {
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+
+  const prefixCls = getPrefixCls('result', customizePrefixCls);
+  const className = classNames(prefixCls, `${prefixCls}-${status}`, customizeClassName, {
+    [`${prefixCls}-rtl`]: direction === 'rtl',
+  });
+  return (
+    <div className={className} style={style}>
+      {renderIcon(prefixCls, { status, icon })}
+      <div className={`${prefixCls}-title`}>{title}</div>
+      {subTitle && <div className={`${prefixCls}-subtitle`}>{subTitle}</div>}
+      {renderExtra(prefixCls, { extra })}
+      {children && <div className={`${prefixCls}-content`}>{children}</div>}
+    </div>
+  );
 };
 
-// eslint-disable-next-line prefer-destructuring
-Result.PRESENTED_IMAGE_403 = ExceptionMap[403];
-// eslint-disable-next-line prefer-destructuring
-Result.PRESENTED_IMAGE_404 = ExceptionMap[404];
-// eslint-disable-next-line prefer-destructuring
-Result.PRESENTED_IMAGE_500 = ExceptionMap[500];
+Result.PRESENTED_IMAGE_403 = ExceptionMap['403'];
+Result.PRESENTED_IMAGE_404 = ExceptionMap['404'];
+Result.PRESENTED_IMAGE_500 = ExceptionMap['500'];
 
 export default Result;