React - 如何将另一个组件传递给通用组件？

Question

我想从过滤器下拉组件中删除/分离布局，因为它使通用组件在某些特定用例之外完全无用

transfer-assets.tsx

        <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

  const TransferAssetsLayout = ({
    option,
    index,
  }: TransferAssetsLayoutProps) => {
    return (
      ...
    )
  }

        <FilterDropdown
          data={pensionFunds?.pension_funds}
          dropdownDataLayout={TransferAssetsLayout}
        />

，但这不起作用，因为我需要传递 option 和 key 道具如何将道具 options 和 key 道具传递给 filter-dropdown.tsx 组件以呈现所需的布局？

Answer 1

您可能希望将 dropdownDataLayout 键入为 React.FunctionComponent（呈现 JSX 元素的函数）而不是 JSX.Element（由该函数具体化的 JSX 节点）。您可以提供一个通用定义，将 React 组件限制为仅传递给那些提供一组已知道具的组件（在这种情况下，我正在重用 TransferAssetsLayoutProps 但您可能想要一个更通用的接口，每个布局都符合）

interface FilterDropdownProps {
  /* eslint-disable  @typescript-eslint/no-explicit-any */
  data: any[] | undefined
  dropdownDataLayout: React.FC<TransferAssetsLayoutProps>
}

然后你可以使用React.createElement来具体化它——像<TransferAssetsLayout {...props} />这样的JSX只是React.createElement(TransferAssetsLayout, props)的语法糖，所以如果你在变量中有一个函数组件，而不是使用JSX，你可以直接调用React.createElement。

return (
  <SelectField>
    {data?.map((option: Record<string, any>, index: number) => (
       React.createElement(dropdownDataLayout, {option, key: index})
    ))}
  </SelectField>
)