style: Code style optimization (#36144)

* style: code style optimization

* style: code style optimization

* style: code style optimization

components/result/index.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import classNames from 'classnames';
 import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import WarningFilled from '@ant-design/icons/WarningFilled';
+import classNames from 'classnames';
+import * as React from 'react';
 
 import { ConfigContext } from '../config-provider';
 import warning from '../_util/warning';
@@ -49,7 +49,14 @@ const ExceptionStatus = Object.keys(ExceptionMap);
  * @param prefixCls
  * @param {status, icon}
  */
-const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
+
+interface IconProps {
+  prefixCls: string;
+  icon: React.ReactNode;
+  status: ResultStatusType;
+}
+
+const Icon: React.FC<IconProps> = ({ prefixCls, icon, status }) => {
   const className = classNames(`${prefixCls}-icon`);
 
   warning(
@@ -73,8 +80,17 @@ const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
   return <div className={className}>{icon || iconNode}</div>;
 };
 
-const renderExtra = (prefixCls: string, { extra }: ResultProps) =>
-  extra && <div className={`${prefixCls}-extra`}>{extra}</div>;
+interface ExtraProps {
+  prefixCls: string;
+  extra: React.ReactNode;
+}
+
+const Extra: React.FC<ExtraProps> = ({ prefixCls, extra }) => {
+  if (!extra) {
+    return null;
+  }
+  return <div className={`${prefixCls}-extra`}>{extra}</div>;
+};
 
 export interface ResultType extends React.FC<ResultProps> {
   PRESENTED_IMAGE_404: React.FC;
@@ -101,10 +117,10 @@ const Result: ResultType = ({
   });
   return (
     <div className={className} style={style}>
-      {renderIcon(prefixCls, { status, icon })}
+      <Icon prefixCls={prefixCls} status={status} icon={icon} />
       <div className={`${prefixCls}-title`}>{title}</div>
       {subTitle && <div className={`${prefixCls}-subtitle`}>{subTitle}</div>}
-      {renderExtra(prefixCls, { extra })}
+      <Extra prefixCls={prefixCls} extra={extra} />
       {children && <div className={`${prefixCls}-content`}>{children}</div>}
     </div>
   );