next.js 有没有可能把prop从父prop传递给子prop?

kqlmhetl  于 2023-04-05  发布在  其他
关注(0)|答案(1)|浏览(139)

我实现了一个自定义组件,他如何接收 prop 一个孩子,问题是,我需要传递一个 prop 给这个孩子 prop 。我怎么能做到这一点?
这是我的自定义组件:

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}
            </div>
          )}
        </FixedSizeList>
      )}
    </AutoSizer>
  )
}

export default VirtualizedCarousel

我需要通过'索引'的儿童 prop 和使用索引在我的儿童组成部分。
应该是这样:

<VirtualizedCarousel>
        <CourseCard
           data={data}
           index={index}
        />
    </VirtualizedCarousel >
tpxzln5u

tpxzln5u1#

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}>
               {React.cloneElement(children, { index })}
            </div>
          )}
        </FixedSizeList>
      )}
    </AutoSizer>
  )
}

export default VirtualizedCarousel

相关问题