Question

我想单击一个部分来更改SVG颜色的颜色，

到目前为止，这是我的解决方法

    import { ReactComponent as DownloadSVG } from 'assets/images/share_download.svg';
        .......
    
    const Demo = () => {
    
        return (
         <div className={`download-options ${tab ==='downloadoptions' && 'active-tab'}`}>
           <span style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className="download_icon" onClick={handleDownloadTabClick}>
                        <DownloadSVG style={{ fill: isBlack ? '#fff' : '#262626'}} />
            </span>
          <span className="download_title media-text">DOWNLOAD</span>
         </div>
    )
 }
export default Demo;

很不幸，我遇到了以下错误

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

这是怎么了？

Answer 1

我相信这是tab变量声明。

尝试：

import { ReactComponent as DownloadSVG } from "assets/images/share_download.svg";

const Demo = () => {
  return (
    <div
      className={`download-options ${
        tab && tab === "downloadoptions" ? "active-tab" : ""
      }`}
    >
      <span
        style={{ backgroundColor: isBlack ? "#262626" : "#F3F3F3" }}
        className="download_icon"
        onClick={handleDownloadTabClick}
      >
        <DownloadSVG style={{ fill: isBlack ? "#fff" : "#262626" }} />
      </span>
      <span className="download_title media-text">DOWNLOAD</span>
    </div>
  );
};

export default Demo;

为什么行得通

要真正知道这是非常困难的，因为我只能看到部分源代码–因此，我最好的猜测是，在初始渲染时，tab变量尚未定义（因此），因此{{ 1}}。

当您使用类似{em> 这样的简写逻辑undefined时，JavaScript将在{{1之前的部分}返回值 tab === "downloadoptions" && 'active-tab' }}是假的。这是一个false值，React期望该值为&&。

将其粘贴到浏览器控制台中即可看到它：

Boolean

因此，最好使用始终返回字符串的Ternary operator。

像这样：

String

希望这可以清除一切。

更改SVG颜色：React.createElement：类型无效-预期为字符串

1 个答案:

为什么行得通