Next.js中Slider组件映射数组报错：Element[]无法赋值给ReactNode

我下载了一个Next.js落地页模板，所有包含Slider且需要遍历数组的组件都报错。试过找解决方案但没用，也不知道怎么给Slider加Fragment，求帮忙。

鼠标悬停Slider时的错误 #

No overload matches this call.
  Overload 1 of 2, '(props: Settings | Readonly<Settings>): Slider', gave the following error.
    Type 'Element[]' is not assignable to type 'ReactNode'.
  Overload 2 of 2, '(props: Settings, context: any): Slider', gave the following error.
    Type 'Element[]' is not assignable to type 'ReactNode'.ts(2769)
index.d.ts(40, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Slider> & Readonly<Settings>'
index.d.ts(40, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Slider> & Readonly<Settings>'

添加组件时的错误 #

'Component' cannot be used as a JSX component.
  Its instance type 'MultipleItems' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'Element' is not assignable to type 'ReactNode'.ts(2786)

文件结构与代码示例 #

page.tsx #

import Banner from './components/Banner/index';
import Companies from './components/Companies/Companies';
import Courses from './components/Courses/index';
import Mentor from './components/Mentor/index';
import Testimonials from './components/Testimonials/index';
import Newsletter from './components/Newsletter/Newsletter';


export default function Home() {
  return (
    <main>
      <Banner />
      <Companies />
      <Courses />
      <Mentor />
      <Testimonials />
      <Newsletter />
    </main>
  )
}

component.tsx #

"use client"
// Imports go here.

// IMAGES DATA FOR CAROUSEL
interface Data {
    imgSrc: string;
}

const data: Data[] = [
    {
        imgSrc: "/assets/carousel/airbnb.svg"
    },
   // And others
]


// CAROUSEL SETTINGS
export default class MultipleItems extends Component {
    render() {
        const settings = {
            dots: false,
            infinite: true,
            slidesToShow: 4,
            slidesToScroll: 1,
            arrows: false,
            autoplay: true,
            speed: 2000,
            autoplaySpeed: 2000,
            cssEase: "linear",
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 4,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: false
                    }
                },
               // breakpoints 700, and 500 included too
            ]
        };

        return (

            <div className='text-center my-20'>
                <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
                    <h2 className="text-midnightblue text-2xl font-semibold">Trusted by companies of all sizes</h2>
                    <div className="py-14">

{/* Error happening on this slider */}
                        <Slider {...settings}>
                            {data.map((item, i) =>
                                <div key={i}>
                                    <Image src={item.imgSrc} alt={item.imgSrc} width={116} height={36} />
                                </div>
                            )}
                        </Slider>
                    </div>
                    <hr />
                </div>
            </div>

        )
    }
}

1. 修复Slider子元素类型不匹配 #

错误提示Element[]无法赋值给ReactNode，说明当前Slider组件不支持直接传入数组作为子元素。用React Fragment或容器元素包裹遍历结果即可：

<Slider {...settings}>
  {/* 用Fragment包裹，不额外生成DOM节点 */}
  <>
    {data.map((item, i) =>
      <div key={i}>
        <Image src={item.imgSrc} alt={item.imgSrc} width={116} height={36} />
      </div>
    )}
  </>
</Slider>

如果Fragment会影响样式，也可以用<div>替代包裹。

2. 解决Class Component类型兼容问题 #

第二个错误是Class组件返回类型与ReactNode不兼容，推荐改用Next.js 13+更适配的函数组件：

"use client"
// Imports go here.

interface Data {
    imgSrc: string;
}

const data: Data[] = [
    {
        imgSrc: "/assets/carousel/airbnb.svg"
    },
   // And others
]

export default function MultipleItems() {
    const settings = {
        dots: false,
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        arrows: false,
        autoplay: true,
        speed: 2000,
        autoplaySpeed: 2000,
        cssEase: "linear",
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 1,
                    infinite: true,
                    dots: false
                }
            },
           // breakpoints 700, and 500 included too
        ]
    };

    return (
        <div className='text-center my-20'>
            <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
                <h2 className="text-midnightblue text-2xl font-semibold">Trusted by companies of all sizes</h2>
                <div className="py-14">
                    <Slider {...settings}>
                        <>
                            {data.map((item, i) =>
                                <div key={i}>
                                    <Image src={item.imgSrc} alt={item.imgSrc} width={116} height={36} />
                                </div>
                            )}
                        </>
                    </Slider>
                </div>
                <hr />
            </div>
        </div>
    )
}

如果坚持用Class组件，需要明确指定类型：

import { Component, ReactNode } from 'react';

export default class MultipleItems extends Component<{}, {}> {
    render(): ReactNode {
        // 原有代码逻辑
    }
}

3. 检查依赖版本兼容性 #

若以上方法无效，更新React类型包和Slider组件版本：

npm install @types/react@latest @types/react-dom@latest
# 若使用react-slick，同步更新
npm install react-slick@latest @types/react-slick@latest

内容的提问来源于stack exchange，提问作者kihiuFrank