feat: add forwardRef (#298)

* feat: add forwardRef

* update

Author: Wxh16144

src/Collapse.tsx

@@ -15,7 +15,7 @@ function getActiveKeysArray(activeKey: React.Key | React.Key[]) {
   return currentActiveKey.map((key) => String(key));
 }
 
-function Collapse(props: CollapseProps) {
+const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {
   const {
     prefixCls = 'rc-collapse',
     destroyInactivePanel = false,
@@ -111,10 +111,15 @@ function Collapse(props: CollapseProps) {
 
   // ======================== Render ========================
   return (
-    <div className={collapseClassName} style={style} role={accordion ? 'tablist' : undefined}>
+    <div
+      ref={ref}
+      className={collapseClassName}
+      style={style}
+      role={accordion ? 'tablist' : undefined}
+    >
       {children}
     </div>
   );
-}
+});
 
 export default Object.assign(Collapse, { Panel: CollapsePanel });

src/Panel.tsx

@@ -5,7 +5,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import CSSMotion from 'rc-motion';
 import PanelContent from './PanelContent';
 
-function CollapsePanel(props: CollapsePanelProps) {
+const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((props, ref) => {
   const {
     showArrow = true,
     headerClass,
@@ -88,7 +88,7 @@ function CollapsePanel(props: CollapsePanelProps) {
 
   // ======================== Render ========================
   return (
-    <div {...resetProps} className={collapsePanelClassNames}>
+    <div {...resetProps} ref={ref} className={collapsePanelClassNames}>
       <div {...headerProps}>
         {showArrow && iconNode}
         <span
@@ -106,10 +106,10 @@ function CollapsePanel(props: CollapsePanelProps) {
         forceRender={forceRender}
         removeOnLeave={destroyInactivePanel}
       >
-        {({ className: motionClassName, style: motionStyle }, ref) => {
+        {({ className: motionClassName, style: motionStyle }, motionRef) => {
           return (
             <PanelContent
-              ref={ref}
+              ref={motionRef}
               prefixCls={prefixCls}
               className={motionClassName}
               style={motionStyle}
@@ -124,6 +124,6 @@ function CollapsePanel(props: CollapsePanelProps) {
       </CSSMotion>
     </div>
   );
-}
+});
 
 export default CollapsePanel;

tests/index.spec.tsx

@@ -638,4 +638,18 @@ describe('collapse', () => {
 
     expect(container.querySelectorAll('.rc-collapse-item')).toHaveLength(2);
   });
+
+  it('ref should work', () => {
+    const ref = React.createRef<any>();
+    const panelRef = React.createRef<any>();
+    const { container } = render(
+      <Collapse ref={ref}>
+        <Panel header="collapse 1" key="1" ref={panelRef}>
+          first
+        </Panel>
+      </Collapse>,
+    );
+    expect(ref.current).toBe(container.firstChild);
+    expect(panelRef.current).toBe(container.querySelector('.rc-collapse-item'));
+  });
 });