React父组件如何向作为Prop传入的子组件传递index参数？

要实现向传入的子组件传递index参数，你需要将组件的children从静态元素改为渲染函数，这样就能在组件内部把FixedSizeList提供的index传递给子组件。

修改后的VirtualizedCarousel组件代码 #

import React from 'react'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList } from 'react-window'

function VirtualizedCarousel({
  height,
  itemSize,
  length,
  children,
  className,
}) {
  return (
    <AutoSizer>
      {({ _, width }) => (
        <FixedSizeList
          height={height}
          itemCount={length}
          itemSize={itemSize}
          width={width}
          layout="horizontal"
        >
          {({ index, style }) => (
            <div className={className} style={style}>
              {/* 调用children函数并传入当前index */}
              {children(index)}
            </div>
          )}
        </FixedSizeList>
      )}
    </AutoSizer>
  )
}

export default VirtualizedCarousel

组件使用示例 #

<VirtualizedCarousel
  height={200}
  itemSize={180}
  length={data.length} // 传入列表总长度
>
  {(index) => (
    <CourseCard
      data={data[index]} // 根据index获取对应数据
      index={index} // 直接传递index参数
    />
  )}
</VirtualizedCarousel>

另一种方案：使用React.cloneElement（适合单个子元素场景） #

如果你更倾向于传入静态子元素而非函数，可以用React.cloneElement给子组件追加index属性：

// 修改VirtualizedCarousel内部的渲染逻辑
{({ index, style }) => (
  <div className={className} style={style}>
    {React.cloneElement(children, { index })}
  </div>
)}

对应使用方式：

<VirtualizedCarousel
  height={200}
  itemSize={180}
  length={data.length}
>
  <CourseCard data={data} />
</VirtualizedCarousel>

这种方式下，CourseCard内部可以通过props.index拿到当前项的索引，再从data中取出对应数据。

内容的提问来源于stack exchange，提问作者Valentino Fabris Valenti