将 React.FunctionComponent<React.SVGProps<SVGSVGElement>> 作为道具发送到另一个组件

Question

我正在尝试从 SVG 导入 React functionComponent，然后将其作为 prop 发送到另一个组件以呈现该 svg。使用下面的设置，这编译得很好，但最终在尝试在浏览器中渲染 svg 时崩溃：

错误：对象作为 React 子对象无效（找到：带有键 {$$typeof,render} 的对象）。如果您打算渲染一组子项，请改用数组。

下面的类被简化了。但我想做的事情的要点是：

在overlay.tsx中：

import { ReactComponent as icon } from "/icon.svg";
import CustomItem from "/customItem";

const Overlay: React.FC<OverlayProps> = () => {

    return (
        <div>
            <CustomItem icon={icon}/>
        </div>
    );
    export default Overlay;
}

在 customItem.tsx 中：

import React from "react";

export interface CustomItemProps {
    icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
}

const CustomItem: React.FC<CustomItemProps> = ({icon}) => {

    return (
        <div>
            {icon}
        </div>
    );
};

export default ApplicationsDropdownItem;

我认为我的问题与 {icon} 的语法有关，但我终其一生都无法找出我应该使用什么。

Answer 1

我认为你应该使用<Icon /> 而不是{icon}，因为它是一个组件。

Answer 2

回答

您要导入的图标是一个组件，因此必须调用它来渲染 JSX。

<Icon {...props}/>（正确）或{Icon(props)}（不推荐）

既然它是一个组件，你也应该把它命名为Icon而不是icon。

看看 this blog post 解释 SVGR。

TL;DR - 渲染组件的最佳方法

A.使用组件语法 <MyComponent/> 而不是 MyComponent() 在您的渲染方法中调用组件。

B.将您的组件实例化为变量，并将其传递给您的渲染方法的 JSX 块。

更多信息

@DustInCompetent 揭示了在 JSX 块中将组件作为函数调用的问题。

正如here 和here 解释的那样，这将导致反应未注册组件挂钩并导致状态和其他问题。

如果您正在实现高级组件 (HOC)，则不应调用组件 within the render method（功能组件中的返回语句），因为这会导致组件出现类似注册问题。

Answer 3

import React from "react";
import { ReactComponent as SampleIcon } from "/sample_icon.svg";

export interface CustomItemProps {
  Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
}

const CustomItem: React.FC<CustomItemProps> = (props) => {
  const Temp = props.Icon as React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
  return (
    <div>
      <Temp/>
    </div>
  );
};

<CustomItem Icon={SampleIcon}/>