diff --git a/README.md b/README.md
index 839d015..3733831 100644
--- a/README.md
+++ b/README.md
@@ -194,6 +194,12 @@ If `accordion` is true, only one panel can be open.  Opening another panel will
           <th></th>
           <td>Content to render in the right of the panel header</td>
       </tr>
+      <tr>
+        <td>wrappedComponentRef</td>
+        <td>inst => this.ref = inst</td>
+        <th>null</th>
+        <td>get panel dom ref</td>
+      </tr>
     </tbody>
 </table>
 
diff --git a/src/Panel.jsx b/src/Panel.jsx
index deb34af..dccce49 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -41,6 +41,7 @@ class CollapsePanel extends Component {
       forceRender,
       expandIcon,
       extra,
+      wrappedComponentRef,
     } = this.props;
     const headerCls = classNames(`${prefixCls}-header`, {
       [headerClass]: headerClass,
@@ -55,8 +56,16 @@ class CollapsePanel extends Component {
     if (showArrow && typeof expandIcon === 'function') {
       icon = expandIcon(this.props);
     }
+    const panelProps = {
+      id,
+      style,
+      className: itemCls,
+    };
+    if (wrappedComponentRef) {
+      panelProps.ref = wrappedComponentRef;
+    }
     return (
-      <div className={itemCls} style={style} id={id}>
+      <div {...panelProps}>
         <div
           className={headerCls}
           onClick={this.handleItemClick}
@@ -67,7 +76,7 @@ class CollapsePanel extends Component {
         >
           {showArrow && icon}
           {header}
-          {extra && (<div className={`${prefixCls}-extra`}>{extra}</div>)}
+          {extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
         </div>
         <Animate
           showProp="isActive"
@@ -116,6 +125,7 @@ CollapsePanel.propTypes = {
   expandIcon: PropTypes.func,
   extra: PropTypes.node,
   panelKey: PropTypes.any,
+  wrappedComponentRef: PropTypes.func,
 };
 
 CollapsePanel.defaultProps = {