From 32b7a3f752db0e09f77de4913d15a2fcc08a571a Mon Sep 17 00:00:00 2001
From: Wei Zhu <yesmeck@gmail.com>
Date: Thu, 7 Sep 2017 20:41:14 -0500
Subject: [PATCH] refactor: carousel ref strings to callback (#7486)

---
 components/carousel/__tests__/index.test.js |  2 +-
 components/carousel/index.tsx               | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/carousel/__tests__/index.test.js b/components/carousel/__tests__/index.test.js
index 356c4412b2..c4c8160b14 100644
--- a/components/carousel/__tests__/index.test.js
+++ b/components/carousel/__tests__/index.test.js
@@ -6,7 +6,7 @@ describe('Carousel', () => {
   it('should has innerSlider', () => {
     const wrapper = mount(<Carousel><div /></Carousel>);
     const innerSlider = wrapper.node.innerSlider;
-    const innerSliderFromRefs = wrapper.node.refs.slick.innerSlider;
+    const innerSliderFromRefs = wrapper.node.slick.innerSlider;
     expect(innerSlider).toBe(innerSliderFromRefs);
     expect(typeof innerSlider.slickNext).toBe('function');
   });
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
index 7b4a8921b6..b12dbc7fe8 100644
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -74,9 +74,7 @@ export default class Carousel extends React.Component<CarouselProps, any> {
     draggable: false,
   };
 
-  refs: {
-    slick: any,
-  };
+  slick: any;
 
   innerSlider: any;
 
@@ -92,9 +90,8 @@ export default class Carousel extends React.Component<CarouselProps, any> {
     if (autoplay) {
       window.addEventListener('resize', this.onWindowResized);
     }
-    const { slick } = this.refs;
     // https://github.com/ant-design/ant-design/issues/7191
-    this.innerSlider = slick && slick.innerSlider;
+    this.innerSlider = this.slick && this.slick.innerSlider;
   }
 
   componentWillUnmount() {
@@ -107,13 +104,16 @@ export default class Carousel extends React.Component<CarouselProps, any> {
 
   onWindowResized = () => {
     // Fix https://github.com/ant-design/ant-design/issues/2550
-    const { slick } = this.refs;
     const { autoplay } = this.props;
-    if (autoplay && slick && slick.innerSlider && slick.innerSlider.autoPlay) {
-      slick.innerSlider.autoPlay();
+    if (autoplay && this.slick && this.slick.innerSlider && this.slick.innerSlider.autoPlay) {
+      this.slick.innerSlider.autoPlay();
     }
   }
 
+  saveSlick = (node) => {
+    this.slick = node;
+  }
+
   render() {
     let props = {
       ...this.props,
@@ -130,7 +130,7 @@ export default class Carousel extends React.Component<CarouselProps, any> {
 
     return (
       <div className={className}>
-        <SlickCarousel ref="slick" {...props} />
+        <SlickCarousel ref={this.saveSlick} {...props} />
       </div>
     );
   }