如何在React组件中通过Render Props向子元素传递多属性？

需求梳理 #

你需要让Pagination组件支持Render Prop模式（类似Headless UI的用法），将activeItem（当前激活项索引）和itemsCount（总项数）传递给子组件，让使用者完全自定义渲染逻辑。

解决方案步骤 #

1. 修正Props类型定义：原代码中children定义为React.ReactElement，但实际需要接收一个函数，所以要修改类型为接收指定参数并返回React节点的函数。
2. 从Context提取状态：从useLightboxContext中获取当前激活项和总项数（根据你的Context实际字段调整，假设state包含currentIndex和totalItems）。
3. 调用函数式Children：在组件内部调用传入的children函数，把需要传递的属性传进去，将返回的内容渲染到容器中。

修改后的完整代码 #

import React from 'react';
import { useLightboxContext } from './你的Context路径';

// 定义Pagination组件的Props类型
interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
  // children是一个函数，接收activeItem和itemsCount，返回React节点
  children: ({ activeItem, itemsCount }: { activeItem: number; itemsCount: number }) => React.ReactNode;
}

const Pagination = ({ children, ...rest }: PaginationProps) => {
  const { state } = useLightboxContext();
  
  // 从context中提取对应的值，根据你的实际context字段调整
  const activeItem = state.currentIndex; // 假设currentIndex是当前激活项的索引
  const itemsCount = state.totalItems; // 假设totalItems是总项数

  return (
    <div {...rest}>
      {/* 调用children函数，传递属性 */}
      {children({ activeItem, itemsCount })}
    </div>
  );
};

export default Pagination;

正确的示例用法 #

注意修正原示例中的拼写错误（itemCount改为itemsCount）：

<Pagination>
  {({ activeItem, itemsCount }) => (
    <>
      <span>当前项：{activeItem + 1}</span> {/* 通常页码从1开始显示，所以+1 */}
      <span>总项数：{itemsCount}</span>
    </>
  )}
</Pagination>

关键说明 #

• Render Prop模式：这是Headless UI组件常用的设计方式，父组件负责管理状态，把状态通过函数传递给子组件，让使用者自由控制UI渲染。
• 类型安全：通过TS定义准确的函数参数类型，避免使用时出现类型错误。
• Context适配：如果你的useLightboxContext返回的state字段名和示例不同（比如不是currentIndex或totalItems），直接替换为实际字段即可。

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