React：如何将自定义组件传入通用组件并传递Props

需求说明 #

需要将FilterDropdown组件的布局渲染逻辑与组件核心逻辑分离，让组件成为通用组件，支持从外部传入自定义布局组件来渲染每个下拉选项，避免组件绑定特定场景。

当前代码问题 #

原代码中FilterDropdownProps将dropdownDataLayout定义为JSX.Element类型，但实际需要传入的是组件类型而非已渲染的元素，导致在组件内部传递option、index等props时无法生效。

解决方案 #

1. 修正组件Props类型定义 #

将dropdownDataLayout的类型改为React函数组件类型，明确它接收option和index两个props：

// filter-dropdown.tsx
import React from 'react';

interface FilterDropdownProps {
  data: Record<string, any>[] | undefined;
  // 定义为接收option和index的函数组件类型
  dropdownDataLayout: React.FC<{option: Record<string, any>, index: number}>;
}

export const FilterDropdown = ({
  data,
  dropdownDataLayout: DropdownDataLayout,
}: FilterDropdownProps) => {
  
  return (
    <SelectField>
      {data?.map((option, index) => (
        // 正确传递props并设置key
        <DropdownDataLayout 
          key={index} 
          option={option} 
          index={index} 
        />
      ))}
    </SelectField>
  );
};

2. 调用端保持原有传入方式即可 #

在transfer-assets.tsx中定义自定义布局组件并传入，无需额外修改：

// transfer-assets.tsx
import { FilterDropdown } from './filter-dropdown';

interface TransferAssetsLayoutProps {
  option: Record<string, any>;
  index: number;
}

const TransferAssetsLayout = ({ option, index }: TransferAssetsLayoutProps) => {
  return (
    // 自定义布局内容，示例展示option名称和序号
    <div>
      {option.name} - 序号: {index}
    </div>
  );
};

// 使用FilterDropdown时传入自定义布局组件
<FilterDropdown
  data={pensionFunds?.pension_funds}
  dropdownDataLayout={TransferAssetsLayout}
/>

关键说明 #

• 把dropdownDataLayout的类型从JSX.Element改为React.FC<...>，允许组件接收动态props；
• 在map循环中渲染传入的组件时，必须传递key（示例用index，实际推荐用option的唯一标识），同时把option和index作为props传递给自定义组件；
• 自定义布局组件可根据业务需求自由渲染内容，完全与FilterDropdown的核心逻辑解耦。

内容的提问来源于stack exchange，提问作者user5618326