我想从过滤器下拉组件中删除/分离布局，因为它使通用组件在某些特定用例之外完全无用
第一个月
<FilterDropdown
data={pensionFunds?.pension_funds}
/>filter-dropdown.tsx
interface FilterDropdownProps {
/* eslint-disable @typescript-eslint/no-explicit-any */
data: any[] | undefined
dropdownDataLayout: JSX.Element
}
export const FilterDropdown = ({
data,
dropdownDataLayout: DropdownDataLayout,
}: FilterDropdownProps) => {
return (
<SelectField>
{data?.map((option: Record<string, any>, index: number) => (
// How to render dropdownDataLayout here ? My idea but is not working -> <DropdownDataLayout option={option} key={index} />
))}
</SelectField>
)
}我的想法是像这样从transfer-assets.tsx传递prop
const TransferAssetsLayout = ({
option,
index,
}: TransferAssetsLayoutProps) => {
return (
...
)
}
<FilterDropdown
data={pensionFunds?.pension_funds}
dropdownDataLayout={TransferAssetsLayout}
/>，但这是行不通的，因为我需要传递option和key prop 如何传递 prop options和key prop 到filter-dropdown.tsx组件，以呈现所需的布局？
1条答案
按热度按时间kx7yvsdv1#
您可能希望将
dropdownDataLayout键入为React.FunctionComponent（呈现JSX元素的函数）而不是JSX.Element（由函数具体化的JSX节点）。您可以提供一个通用定义，将React组件限制为仅传递给那些提供已知属性集的组件（在本例中，我重用了TransferAssetsLayoutProps，但您可能需要一个更通用的接口，以便您的每个布局都符合该接口）然后，您可以使用React.createElement将其具体化--类似
<TransferAssetsLayout {...props} />的JSX只是React.createElement(TransferAssetsLayout, props)的语法糖，因此，如果您在变量中有一个函数组件，而不是使用JSX，您可以直接调用React.createElement。