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

Posted 2023-03-05

【中文标题】更改 svg 颜色：React.createElement: type is invalid -- 需要一个字符串

【英文标题】：Change svg color : React.createElement: type is invalid -- expected a string

【发布时间】：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 组件，因此问!!!!!

【参考方案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"