将 SVG React 组件作为道具传递

Question

我试图将 SVG React 组件作为道具传递，并收到错误JSX element type 'Icon' does not have any construct or call signatures. 我试图根据需要制作 Icon 属性或将 Icon 类型设为任何类型，但我遇到了同样的错误。

 import React from "react"; import {ReactComponent as RecentGamesIcon } from "../../static/images/icon_recent_games.svg"; import CollapsibleArea from "../collapsible-area"; const SeoSectionContainer = (): JSX.Element => { return ( <div> <CollapsibleArea mainText={testMainTest} helpText={testHelpText} Icon={<RecentGamesIcon />} /> </div> ); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

 import React from "react"; type TProps = { mainText: string; items?: JSX.Element[]; Icon?: JSX.Element; }; const CollapsibleArea = ({ Icon, items, mainText }: TProps): JSX.Element => { return ( <div> {!!Icon && <Icon />} <div>{mainText}</div> </div> ); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

`

Answer 1

像这样尝试

import React from "react";
import RecentGamesIcon  from "../../static/images/icon_recent_games.svg";
import CollapsibleArea from "../collapsible-area";

const SeoSectionContainer = (): JSX.Element => {

  return (
<div>
   <CollapsibleArea mainText={testMainTest} helpText={testHelpText} Icon={RecentGamesIcon} />
</div>

); };

在可折叠区域文件中

import React from "react";

type TProps = {
  mainText: string;
  items?: JSX.Element[];
  Icon?: JSX.Element;
};

const CollapsibleArea = ({ Icon, items, mainText }: TProps): JSX.Element => {
  return (
    <div>
      {!!Icon && <img src={Icon}/>}
      <div>{mainText}</div>
    </div>
  );
};

Answer 2

感谢您的回答，但您的变体不起作用。 没什么，我已经找到了解决方案。 图标是 JSX 元素：它需要像这样调用 - <div>{Icon}</div> ，但我像 React 组件一样调用它 - <div><Icon /></div> 。

 import React from "react"; type TProps = { mainText: string; items?: JSX.Element[]; Icon?: JSX.Element; }; const CollapsibleArea = ({ Icon, items, mainText }: TProps): JSX.Element => { return ( <div> {!!Icon && Icon} <div>{mainText}</div> </div> ); };