refactor: carousel ref strings to callback (#7486)

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');
   });

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) {
+    if (autoplay && this.slick && this.slick.innerSlider && this.slick.innerSlider.autoPlay) {
-      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>
     );
   }