Merge pull request #1442 from andreytrofimov/issue1406

Got rid of ReactDOM.findDOMNode (#1406)

Author: akiran

src/inner-slider.js

@@ -1,7 +1,6 @@
 "use strict";
 
 import React from "react";
-import ReactDOM from "react-dom";
 import initialState from "./initial-state";
 import debounce from "lodash.debounce";
 import classnames from "classnames";
@@ -192,7 +191,9 @@ export class InnerSlider extends React.Component {
     this.debouncedResize();
   };
   resizeWindow = (setTrackStyle = true) => {
-    if (!ReactDOM.findDOMNode(this.track)) return;
+    const isTrackMounted = Boolean(this.track && this.track.node);
+    // prevent warning: setting state on unmounted component (server side rendering)
+    if (!isTrackMounted) return;
     let spec = {
       listRef: this.list,
       trackRef: this.track,

src/track.js

@@ -187,12 +187,17 @@ const renderSlides = spec => {
 };
 
 export class Track extends React.PureComponent {
+  node = null;
+
+  handleRef = ref => { this.node = ref };
+
   render() {
     const slides = renderSlides(this.props);
     const { onMouseEnter, onMouseOver, onMouseLeave } = this.props;
     const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave };
     return (
       <div
+        ref={this.handleRef}
         className="slick-track"
         style={this.props.trackStyle}
         {...mouseEvents}

src/utils/innerSliderUtils.js

@@ -1,5 +1,4 @@
 import React from "react";
-import ReactDOM from "react-dom";
 
 export const getOnDemandLazySlides = spec => {
   let onDemandSlides = [];
@@ -99,8 +98,10 @@ export const extractObject = (spec, keys) => {
 export const initializedState = spec => {
   // spec also contains listRef, trackRef
   let slideCount = React.Children.count(spec.children);
-  let listWidth = Math.ceil(getWidth(ReactDOM.findDOMNode(spec.listRef)));
-  let trackWidth = Math.ceil(getWidth(ReactDOM.findDOMNode(spec.trackRef)));
+  const listNode = spec.listRef;
+  let listWidth = Math.ceil(getWidth(listNode));
+  const trackNode = spec.trackRef && spec.trackRef.node;
+  let trackWidth = Math.ceil(getWidth(trackNode));
   let slideWidth;
   if (!spec.vertical) {
     let centerPaddingAdj = spec.centerMode && parseInt(spec.centerPadding) * 2;
@@ -115,9 +116,9 @@ export const initializedState = spec => {
     slideWidth = listWidth;
   }
   let slideHeight =
-    ReactDOM.findDOMNode(spec.listRef) &&
+    listNode &&
     getHeight(
-      ReactDOM.findDOMNode(spec.listRef).querySelector('[data-index="0"]')
+      listNode.querySelector('[data-index="0"]')
     );
   let listHeight = slideHeight * spec.slidesToShow;
   let currentSlide =
@@ -513,7 +514,7 @@ export const getSlideCount = spec => {
     : 0;
   if (spec.swipeToSlide) {
     let swipedSlide;
-    const slickList = ReactDOM.findDOMNode(spec.listRef);
+    const slickList = spec.listRef;
     const slides = slickList.querySelectorAll(".slick-slide");
     Array.from(slides).every(slide => {
       if (!spec.vertical) {
@@ -719,7 +720,7 @@ export const getTrackLeft = spec => {
 
   if (variableWidth === true) {
     var targetSlideIndex;
-    let trackElem = ReactDOM.findDOMNode(trackRef);
+    const trackElem = trackRef && trackRef.node;
     targetSlideIndex = slideIndex + getPreClones(spec);
     targetSlide = trackElem && trackElem.childNodes[targetSlideIndex];
     targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0;