mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 07:56:28 +08:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

fix: fix react dom recognize warning (#49031)

Browse Source
This commit is contained in:
Amumu 2024-05-23 10:24:14 +08:00 committed by GitHub
parent 425f4d0397
commit 3dca74a539
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -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

8
components/carousel/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -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"
/>

14
components/carousel/__tests__/index.test.tsx
View File

@ -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();
});
});

13
components/carousel/index.tsx
View File

@ -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',