From 3dca74a5395fb84b67b85b8ed798fa40106561df Mon Sep 17 00:00:00 2001
From: Amumu <yoyo837@hotmail.com>
Date: Thu, 23 May 2024 10:24:14 +0800
Subject: [PATCH] fix: fix react dom recognize warning (#49031)

---
 .../__snapshots__/demo-extend.test.ts.snap         | 14 +-------------
 .../__tests__/__snapshots__/demo.test.ts.snap      |  8 --------
 components/carousel/__tests__/index.test.tsx       | 14 ++++++++++++++
 components/carousel/index.tsx                      | 13 +++++++++++--
 4 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
index ebe3c3c045..7986e72923 100644
--- a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -12,9 +12,7 @@ Array [
       <button
         aria-label="prev"
         class="slick-arrow slick-prev slick-disabled"
-        currentslide="0"
         data-role="none"
-        slidecount="4"
         style="display: block;"
         type="button"
       />
@@ -110,9 +108,7 @@ Array [
       <button
         aria-label="next"
         class="slick-arrow slick-next"
-        currentslide="0"
         data-role="none"
-        slidecount="4"
         style="display: block;"
         type="button"
       />
@@ -162,9 +158,7 @@ Array [
       <button
         aria-label="prev"
         class="slick-arrow slick-prev slick-disabled"
-        currentslide="0"
         data-role="none"
-        slidecount="4"
         style="display: block;"
         type="button"
       />
@@ -261,9 +255,7 @@ Array [
       <button
         aria-label="next"
         class="slick-arrow slick-next"
-        currentslide="0"
         data-role="none"
-        slidecount="4"
         style="display: block;"
         type="button"
       />
@@ -305,11 +297,7 @@ Array [
 ]
 `;
 
-exports[`renders components/carousel/demo/arrows.tsx extend context correctly 2`] = `
-[
-  "Warning: React does not recognize the \`%s\` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase \`%s\` instead. If you accidentally passed it from a parent component, remove it from the DOM element.%s",
-]
-`;
+exports[`renders components/carousel/demo/arrows.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/carousel/demo/autoplay.tsx extend context correctly 1`] = `
 <div
diff --git a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
index 8517ec57cb..50751a7206 100644
--- a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
@@ -12,9 +12,7 @@ Array [
       <button
         aria-label="prev"
         class="slick-arrow slick-prev slick-disabled"
-        currentslide="0"
         data-role="none"
-        slidecount="4"
         style="display:block"
         type="button"
       />
@@ -110,9 +108,7 @@ Array [
       <button
         aria-label="next"
         class="slick-arrow slick-next"
-        currentslide="0"
         data-role="none"
-        slidecount="4"
         style="display:block"
         type="button"
       />
@@ -162,9 +158,7 @@ Array [
       <button
         aria-label="prev"
         class="slick-arrow slick-prev slick-disabled"
-        currentslide="0"
         data-role="none"
-        slidecount="4"
         style="display:block"
         type="button"
       />
@@ -260,9 +254,7 @@ Array [
       <button
         aria-label="next"
         class="slick-arrow slick-next"
-        currentslide="0"
         data-role="none"
-        slidecount="4"
         style="display:block"
         type="button"
       />
diff --git a/components/carousel/__tests__/index.test.tsx b/components/carousel/__tests__/index.test.tsx
index 7e91f2d787..247736f546 100644
--- a/components/carousel/__tests__/index.test.tsx
+++ b/components/carousel/__tests__/index.test.tsx
@@ -178,4 +178,18 @@ describe('Carousel', () => {
     await waitFakeTimer();
     expect(ref.current?.innerSlider.state.currentSlide).toBe(1);
   });
+
+  it('no dom recognize warning', async () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(
+      <Carousel arrows>
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+      </Carousel>,
+    );
+    await waitFakeTimer();
+    expect(errSpy).not.toHaveBeenCalled();
+    errSpy.mockRestore();
+  });
 });
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
index 915b09bdf6..4dd1742dff 100644
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -31,12 +31,21 @@ export interface CarouselRef {
   innerSlider: any;
 }
 
+interface ArrowType extends React.ButtonHTMLAttributes<HTMLElement> {
+  currentSlide?: number;
+  slideCount?: number;
+}
+
+function ArrowButton({ currentSlide, slideCount, ...rest }: ArrowType) {
+  return <button type="button" {...rest} />;
+}
+
 const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   const {
     dots = true,
     arrows = false,
-    prevArrow = <button type="button" aria-label="prev" />,
-    nextArrow = <button type="button" aria-label="next" />,
+    prevArrow = <ArrowButton aria-label="prev" />,
+    nextArrow = <ArrowButton aria-label="next" />,
     draggable = false,
     waitForAnimate = false,
     dotPosition = 'bottom',