更改 svg 颜色：React.createElement: type is invalid -- 需要一个字符串答案

【问题标题】：Change svg color : React.createElement: type is invalid -- expected a string更改 svg 颜色：React.createElement: type is invalid -- 需要一个字符串
【发布时间】：2020-11-21 08:59:22
【问题描述】：

我有一个部分我想单击以更改 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：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

这里有什么问题？

【问题讨论】：

您是否使用create-react-app 来设置您的项目？
@kiranvj 这跟我面临的问题有什么关系？？？？？
这和webpack的配置方式有关！！！！！！！！！ &&&& CRA 使用 svgr，这让你导入一个 svg 文件作为 React 组件，因此问!!!!!

标签： javascript html css reactjs svg

【解决方案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 变量尚未定义（尚未），因此是undefined。

当您使用简写逻辑像这样：tab === "downloadoptions" && 'active-tab'，当&& 之前的部分为假时，JavaScript 返回值 false。这是一个 Boolean 值，其中 React 需要一个 String。

将其粘贴到浏览器控制台时可以看到它：

let tab; // this sets the variable, but it is still "undefined"
console.info(tab === "downloadoptions" && 'active-tab'); // returns: false

因此最好使用总是返回字符串的Ternary operator。

像这样：

let tab; // this sets the variable, but it is still "undefined"
console.info(tab && tab === "downloadoptions" ? 'active-tab' : 'nothing'); // returns: "nothing"

【讨论】：