fix: Typography warning for ref error

components/_util/ref.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export function fillRef<T>(ref: React.Ref<T>, node: T) {
+  if (typeof ref === 'function') {
+    ref(node);
+  } else if (typeof ref === 'object' && ref) {
+    (ref as any).current = node;
+  }
+}
+
+export function composeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
+  return (node: T) => {
+    refs.forEach(ref => {
+      fillRef(ref, node);
+    });
+  };
+}

components/typography/Base.tsx

@@ -459,7 +459,7 @@ class Base extends React.Component<InternalBlockProps & ConfigConsumerProps, Bas
                   WebkitLineClamp: cssLineClamp ? rows : null,
                 }}
                 component={component}
-                setContentRef={this.setContentRef}
+                ref={this.setContentRef}
                 aria-label={ariaLabel}
                 {...textProps}
               >

components/typography/Typography.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import warning from '../_util/warning';
+import { composeRef } from '../_util/ref';
 
 export interface TypographyProps {
   id?: string;
@@ -13,38 +15,51 @@ export interface TypographyProps {
 
 interface InternalTypographyProps extends TypographyProps {
   component?: string;
+  /** @deprecated Use `ref` directly */
   setContentRef?: (node: HTMLElement) => void;
 }
 
-class Typography extends React.Component<InternalTypographyProps> {
-  renderTypography = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const {
-      prefixCls: customizePrefixCls,
-      component = 'article',
-      className,
-      'aria-label': ariaLabel,
-      setContentRef,
-      children,
-      ...restProps
-    } = this.props;
-    const Component = component as any;
-    const prefixCls = getPrefixCls('typography', customizePrefixCls);
-
-    return (
-      <Component
-        className={classNames(prefixCls, className)}
-        aria-label={ariaLabel}
-        ref={setContentRef}
-        {...restProps}
-      >
-        {children}
-      </Component>
-    );
-  };
-
-  render() {
-    return <ConfigConsumer>{this.renderTypography}</ConfigConsumer>;
+const Typography: React.RefForwardingComponent<{}, InternalTypographyProps> = (
+  {
+    prefixCls: customizePrefixCls,
+    component = 'article',
+    className,
+    'aria-label': ariaLabel,
+    setContentRef,
+    children,
+    ...restProps
+  },
+  ref,
+) => {
+  let mergedRef = ref;
+
+  if (setContentRef) {
+    warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
+    mergedRef = composeRef(ref, setContentRef);
   }
-}
 
-export default Typography;
+  return (
+    <ConfigConsumer>
+      {({ getPrefixCls }: ConfigConsumerProps) => {
+        const Component = component as any;
+        const prefixCls = getPrefixCls('typography', customizePrefixCls);
+
+        return (
+          <Component
+            className={classNames(prefixCls, className)}
+            aria-label={ariaLabel}
+            ref={mergedRef}
+            {...restProps}
+          >
+            {children}
+          </Component>
+        );
+      }}
+    </ConfigConsumer>
+  );
+};
+
+const RefTypography = React.forwardRef(Typography);
+RefTypography.displayName = 'Typography';
+
+export default RefTypography;

components/typography/__tests__/index.test.js

@@ -6,6 +6,7 @@ import Title from '../Title';
 import Paragraph from '../Paragraph';
 import Base from '../Base'; // eslint-disable-line import/no-named-as-default
 import mountTest from '../../../tests/shared/mountTest';
+import Typography from '../Typography';
 
 jest.mock('copy-to-clipboard');
 
@@ -94,10 +95,13 @@ describe('Typography', () => {
       });
 
       it('connect children', () => {
+        const bamboo = 'Bamboo';
+        const is = ' is ';
+
         const wrapper = mount(
           <Base ellipsis component="p" editable>
-            {'Bamboo'}
-            {' is '}
+            {bamboo}
+            {is}
             <code>Little</code>
             <code>Light</code>
           </Base>,
@@ -237,4 +241,12 @@ describe('Typography', () => {
       });
     });
   });
+
+  it('warning if use setContentRef', () => {
+    mount(<Typography setContentRef={React.createRef()} />);
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Typography] `setContentRef` is deprecated. Please use `ref` instead.',
+    );
+  });
 });