React+TypeScript中如何正确渲染切片后的children子元素

问题背景 #

需要在ReactJS中实现带分页功能的组合轮播组件，初始实现代码如下：

interface HTMLCarouselT {
  children: Array<JSX.Element>
  size: number;
}

const HTMLCarousel = ({children, size}: HTMLCarouselT) => {
  const length = Math.ceil(size / children.length);
  const {
    step,
    isFirst,
    isLast,
    next: nextPage,
    prev: prevPage
  } = useStepper(length);
  return (
    <div>
      <div>
        {children.slice(step * size, size).map((Item, index) => (
          <Item key={index}/>
        ))}
      </div>
      ...
    </div>
  )
};

const App = () => {
  return (
    <HTMLCarousel size={3}>
      <h1>One</h1>
      <h1>Two</h1>
      <h1>Three</h1>
      <h1>Four</h1>
      <h1>Five</h1>
      <h1>Six</h1>
    </HTMLCarousel>
  );
}

运行代码时出现两类错误：

TypeScript报错：JSX element type 'Item' does not have any construct or call signatures.

运行时警告：Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <h1 />. Did you accidentally export a JSX literal instead of a component?

要求组件具备通用性，可同时兼容自定义组件与原生JSX元素。

错误原因 #

代码存在三个核心问题：

1. 分页计算逻辑颠倒：总页数应该是「总子元素数/单页展示数」向上取整，原代码写反了分子分母；同时Array.slice的第二个参数是切片结束索引，原代码直接传入单页大小，切片范围完全错误。
2. children类型定义不准确：直接定义为Array<JSX.Element>无法兼容单个子元素、文本节点、Fragment等合法React子元素场景。
3. 渲染逻辑完全错误：通过props传入的children是已经完成实例化的JSX节点（即已经调用过React.createElement生成的可直接渲染对象），并非组件函数/类。原代码将JSX节点作为组件传入JSX标签二次实例化，必然触发类型错误和运行时警告。

正确实现 #

import React, { useMemo, useState, useCallback } from 'react';

// 分页步进hook（若已有实现可直接替换）
const useStepper = (maxStep: number) => {
  const [step, setStep] = useState(0);
  const isFirst = step === 0;
  const isLast = step === Math.max(0, maxStep - 1);

  const next = useCallback(() => {
    if (!isLast) setStep(prev => prev + 1);
  }, [isLast]);

  const prev = useCallback(() => {
    if (!isFirst) setStep(prev => prev - 1);
  }, [isFirst]);

  return { step, isFirst, isLast, next, prev };
};

interface HTMLCarouselProps {
  children: React.ReactNode;
  size: number;
}

const HTMLCarousel = ({ children, size }: HTMLCarouselProps) => {
  // 标准化children为数组，兼容各类子元素边界情况
  const childList = useMemo(() => React.Children.toArray(children), [children]);
  // 正确计算总页数
  const pageCount = useMemo(
    () => Math.ceil(childList.length / size),
    [childList.length, size]
  );

  const { step, isFirst, isLast, next: nextPage, prev: prevPage } = useStepper(pageCount);

  // 正确切片获取当前页元素
  const currentPageItems = useMemo(() => {
    const start = step * size;
    return childList.slice(start, start + size);
  }, [step, size, childList]);

  return (
    <div className="carousel-wrapper">
      <div className="carousel-content">
        {/* 直接渲染JSX节点，无需二次实例化 */}
        {currentPageItems.map((item, index) => (
          <React.Fragment key={index}>{item}</React.Fragment>
        ))}
      </div>
      <div className="carousel-controls">
        <button onClick={prevPage} disabled={isFirst}>上一页</button>
        <span>{step + 1} / {pageCount}</span>
        <button onClick={nextPage} disabled={isLast}>下一页</button>
      </div>
    </div>
  );
};

// 使用示例：同时兼容原生标签、自定义组件
const CustomCard = ({ title }: { title: string }) => <div className="card">{title}</div>;

const App = () => {
  return (
    <HTMLCarousel size={3}>
      <h1>One</h1>
      <h1>Two</h1>
      <h1>Three</h1>
      <h1>Four</h1>
      <CustomCard title="自定义组件卡片1" />
      <CustomCard title="自定义组件卡片2" />
    </HTMLCarousel>
  );
};

export default App;

实现说明 #

• 类型层面使用React内置React.ReactNode定义children类型，搭配React.Children.toArray做标准化处理，兼容所有合法React子元素，包括原生DOM标签、类组件、函数组件、文本节点、Fragment等。
• 修正分页计算、切片逻辑，保证分页跳转时元素展示范围正确。
• 渲染时直接输出切片后的JSX节点，不做二次实例化，从根源解决类型报错和运行时警告。
• 列表项使用React.Fragment包裹，不会额外生成冗余DOM节点，同时保证React列表diff逻辑正常运行。

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