chore: code style optimization (#55450)

* chore: code style optimization

* update

components/typography/Link.tsx

@@ -10,22 +10,31 @@ export interface LinkProps
   ellipsis?: boolean;
 }
 
-const Link = React.forwardRef<HTMLElement, LinkProps>(({ ellipsis, rel, ...restProps }, ref) => {
+const Link = React.forwardRef<HTMLElement, LinkProps>((props, ref) => {
+  const {
+    ellipsis,
+    rel,
+    children,
+    // @ts-expect-error: https://github.com/ant-design/ant-design/issues/26622
+    navigate: _navigate,
+    ...restProps
+  } = props;
+
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Typography.Link');
-
     warning(typeof ellipsis !== 'object', 'usage', '`ellipsis` only supports boolean value.');
   }
 
-  const mergedProps = {
+  const mergedProps: LinkProps = {
     ...restProps,
     rel: rel === undefined && restProps.target === '_blank' ? 'noopener noreferrer' : rel,
   };
 
-  // @ts-expect-error: https://github.com/ant-design/ant-design/issues/26622
-  delete mergedProps.navigate;
-
-  return <Base {...mergedProps} ref={ref} ellipsis={!!ellipsis} component="a" />;
+  return (
+    <Base {...mergedProps} ref={ref} ellipsis={!!ellipsis} component="a">
+      {children}
+    </Base>
+  );
 });
 
 export default Link;

components/typography/Paragraph.tsx

@@ -7,8 +7,13 @@ export interface ParagraphProps
   extends BlockProps<'div'>,
     Omit<React.HTMLAttributes<HTMLDivElement>, 'type' | keyof BlockProps<'div'>> {}
 
-const Paragraph = React.forwardRef<HTMLElement, ParagraphProps>((props, ref) => (
-  <Base ref={ref} {...props} component="div" />
-));
+const Paragraph = React.forwardRef<HTMLElement, ParagraphProps>((props, ref) => {
+  const { children, ...restProps } = props;
+  return (
+    <Base ref={ref} {...restProps} component="div">
+      {children}
+    </Base>
+  );
+});
 
 export default Paragraph;

components/typography/Text.tsx

@@ -11,10 +11,8 @@ export interface TextProps
   ellipsis?: boolean | Omit<EllipsisConfig, 'expandable' | 'rows' | 'onExpand'>;
 }
 
-const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (
-  { ellipsis, ...restProps },
-  ref,
-) => {
+const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (props, ref) => {
+  const { ellipsis, children, ...restProps } = props;
   const mergedEllipsis = React.useMemo(() => {
     if (ellipsis && typeof ellipsis === 'object') {
       return omit(ellipsis as EllipsisConfig, ['expandable', 'rows']);
@@ -34,7 +32,11 @@ const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (
     );
   }
 
-  return <Base ref={ref} {...restProps} ellipsis={mergedEllipsis} component="span" />;
+  return (
+    <Base ref={ref} {...restProps} ellipsis={mergedEllipsis} component="span">
+      {children}
+    </Base>
+  );
 };
 
 export default React.forwardRef(Text);

components/typography/Title.tsx

@@ -17,7 +17,7 @@ export interface TitleProps
 }
 
 const Title = React.forwardRef<HTMLElement, TitleProps>((props, ref) => {
-  const { level = 1, ...restProps } = props;
+  const { level = 1, children, ...restProps } = props;
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Typography.Title');
 
@@ -30,7 +30,11 @@ const Title = React.forwardRef<HTMLElement, TitleProps>((props, ref) => {
   const component: keyof JSX.IntrinsicElements = TITLE_ELE_LIST.includes(level)
     ? `h${level}`
     : `h1`;
-  return <Base ref={ref} {...restProps} component={component} />;
+  return (
+    <Base ref={ref} {...restProps} component={component}>
+      {children}
+    </Base>
+  );
 });
 
 export default Title;

components/upload/Dragger.tsx

@@ -6,17 +6,21 @@ import Upload from './Upload';
 
 export type DraggerProps<T = any> = UploadProps<T> & { height?: number };
 
-const Dragger = React.forwardRef<UploadRef, DraggerProps>(
-  ({ style, height, hasControlInside = false, ...restProps }, ref) => (
+const Dragger = React.forwardRef<UploadRef, DraggerProps<any>>((props, ref) => {
+  const { style, height, hasControlInside = false, children, ...restProps } = props;
+  const mergedStyle: React.CSSProperties = { ...style, height };
+  return (
     <Upload
       ref={ref}
       hasControlInside={hasControlInside}
       {...restProps}
+      style={mergedStyle}
       type="drag"
-      style={{ ...style, height }}
-    />
-  ),
-);
+    >
+      {children}
+    </Upload>
+  );
+});
 
 if (process.env.NODE_ENV !== 'production') {
   Dragger.displayName = 'Dragger';