如何通过数组传递道具

Question

在 FilterScreen 上，我有可供选择的过滤器列表。 Filters.js 具有过滤器组件数组和具有选定过滤器的组件。如何将道具传递给数组中的这些过滤器组件？

//Filters.js
const Filters = [
    <Filter1 />,
    <Filter2 />,
    ...,
]

export const MyFilter = props => Filters[props.filterIndex]

//FilterScreen.js
...

<MyFilter filterIndex={this.state.filterIndex} />

...

我想在MyFilter组件中传递不透明度prop，并在Filter1组件中使用该值。

Answer 1

您可以将Filters本身变成一个组件，然后spread将props变成这样的子对象

const Filters = ({customProp, ...rest}) =>([
    <Filter1 {...rest} />,
    <Filter2 {...rest} customProp={customProp} />
])

并像这样使用它

export const MyFilter = props => <Filters  customProp='foo' filterIndex={props.filterIndex} />