fix: add nodeRef

BREAKING CHANGE: version incompatible ref #8
Learn-Python-and-Javascript · Jun 18, 2020 · c407825 · c407825
1 parent ead823f
commit c407825
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/src/components/DishDetail.js b/src/components/DishDetail.js
@@ -231,6 +231,10 @@ const DishDetail = (props) => {
                 </div>
             </div>
         );
+    } else {
+        return (
+            <div></div>
+        );
     }
 }
 

diff --git a/src/components/Home.js b/src/components/Home.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useRef} from "react";
 import {
     Card,
     CardImg,
@@ -12,6 +12,7 @@ import { baseUrl } from "../shared/baseUrl";
 import { FadeTransform } from 'react-animation-components';
 
 function RenderCard({item, isLoading, errMess}) {
+    const nodeRef = useRef(null);
     if (isLoading) {
         return (
             <Loading />
@@ -22,7 +23,7 @@ function RenderCard({item, isLoading, errMess}) {
         );
     } else {
         return (
-            <FadeTransform in transformProps={{ exitTransform: 'scale(0.5) translateY(-50%)' }}>
+            <FadeTransform nodeRef={nodeRef} in transformProps={{ exitTransform: 'scale(0.5) translateY(-50%)' }}>
                 <Card>
                     <CardImg src={baseUrl + item.image} alt={item.name}/>
                     <CardBody>

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, {Component, useRef} from "react";
 import Menu from "./Menu";
 import DishDetail from "./DishDetail";
 import Header from "./Header";
@@ -74,11 +74,12 @@ class Main extends Component {
             );
         };
 
-        return (
-            <div>
-                <Header />
+        const MainRoutes = () => {
+            const nodeRef = useRef(null);
+            return (
                 <TransitionGroup>
                     <CSSTransition
+                        nodeRef={nodeRef}
                         key={this.props.location.key}
                         classNames="page"
                         timeout={300}
@@ -100,6 +101,13 @@ class Main extends Component {
                         </Switch>
                     </CSSTransition>
                 </TransitionGroup>
+            );
+        }
+
+        return (
+            <div>
+                <Header />
+                <MainRoutes />
                 <Footer />
             </div>
         );