是否有可能从父道具传递到子道具?

Question

我实现了一个自定义组件，他接收了一个子道具，问题是我需要给这个子道具传递一个道具。我该怎么做呢?

这是我的自定义组件:

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

我需要将'index'传递给children prop，并在我的children组件中使用index。

应该像这样:

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

Answer 1

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