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>

）; };

在CollapsibleArea文件中

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>
  );
};

将SVG React组件作为道具传递

2 个答案: