TypeScript/React中函数无法赋值给JSX img src属性的解决办法

问题根源 #

你没有执行logoSwitcher函数，直接把函数本身赋值给了src属性。src要求接收字符串类型的图片地址，而你传入的是类型为() => string的函数本体，自然会触发TS类型不匹配报错，IDE提示的「是否要调用该表达式」就是对应这个问题的修复指引。

解决方案 #

方案1：调用函数获取返回值 #

直接在JSX里执行logoSwitcher函数，拿到它返回的字符串赋值给src即可：

<img src={logoSwitcher()} className="header__logo" alt="" />

方案2：简化逻辑省略函数 #

这个判断逻辑非常简短，没必要单独封装函数，可以直接用三元表达式写在src属性里，代码更简洁：

<img 
  src={theme.mode === "light" ? (logo || "") : (logoDark || "")} 
  className="header__logo" 
  alt="" 
/>

内容的提问来源于stack exchange，提问作者justinWaves