fixed some issues with component changes

ant-design · Jun 5, 2023 · 45e92f0 · 45e92f0
1 parent 38f99c1
commit 45e92f0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/examples/CustomSlides.js b/examples/CustomSlides.js
@@ -2,9 +2,9 @@ import React, { Component } from "react";
 import Slider from "../src/slider";
 
 function CustomSlide(props) {
-  const { index, ...props } = props;
+  const { index, ...otherProps } = props;
   return (
-    <div {...props}>
+    <div {...otherProps}>
       <h3>{index}</h3>
     </div>
   );

diff --git a/examples/PreviousNextMethods.js b/examples/PreviousNextMethods.js
@@ -2,12 +2,12 @@ import React, { useRef } from "react";
 import Slider from "../src/slider";
 
 function PreviousNextMethods(props) {
-  const sliderRef = useRef(null);
+  let sliderRef = useRef(null);
   const next = () => {
-    this.slider.slickNext();
+    sliderRef.slickNext();
   };
   const previous = () => {
-    this.slider.slickPrev();
+    sliderRef.slickPrev();
   };
   const settings = {
     dots: true,
@@ -20,7 +20,12 @@ function PreviousNextMethods(props) {
   return (
     <div>
       <h2>Previous and Next methods</h2>
-      <Slider ref={slider => (sliderRef = slider)} {...settings}>
+      <Slider
+        ref={slider => {
+          sliderRef = slider;
+        }}
+        {...settings}
+      >
         <div key={1}>
           <h3>1</h3>
         </div>

diff --git a/examples/SlideChangeHooks.js b/examples/SlideChangeHooks.js
@@ -22,15 +22,13 @@ function SlideChangeHooks() {
     <div>
       <h2>beforeChange and afterChange hooks</h2>
       <p>
-        BeforeChange {"=>"} oldSlide: <strong>{this.state.oldSlide}</strong>
+        BeforeChange {"=>"} oldSlide: <strong>{oldSlide}</strong>
       </p>
       <p>
-        BeforeChange {"=>"} activeSlide:{" "}
-        <strong>{this.state.activeSlide}</strong>
+        BeforeChange {"=>"} activeSlide: <strong>{activeSlide}</strong>
       </p>
       <p>
-        AfterChange {"=>"} activeSlide:{" "}
-        <strong>{this.state.activeSlide2}</strong>
+        AfterChange {"=>"} activeSlide: <strong>{activeSlide2}</strong>
       </p>
       <Slider {...settings}>
         <div>