React/Next.js更新后img元素isDisabled属性识别错误求助

问题原因 #

你写的<img>标签里没有显式添加isDisabled属性，但父组件大概率通过属性展开（比如{...props}）把这个属性误传递给了img元素。原生HTML的<img>标签并不支持isDisabled属性，所以React会抛出错误；换成<span>后错误消失，是因为你没把父组件的属性传递给span，或者span未被父组件传递该属性。

解决方案 #

1. 在img组件中过滤掉isDisabled属性

如果父组件需要传递其他属性给img，只需排除isDisabled：

// 若img封装在自定义组件中，先解构过滤属性
const Avatar = ({ isDisabled, ...rest }) => {
  return (
    <img 
      src={user?.photoURL || "https://xxxxxxx"} 
      alt="avatar" 
      className="w-8 h-8 rounded-full border-2 border-violet-600 cursor-pointer"
      {...rest}
    />
  );
};

如果是直接写的img标签（未封装组件），可直接在标签内处理：

// 假设props是父组件传递的所有属性
<img 
  src={user?.photoURL || "https://xxxxxxx"} 
  alt="avatar" 
  className="w-8 h-8 rounded-full border-2 border-violet-600 cursor-pointer"
  {...(({ isDisabled, ...rest }) => rest)(props)}
/>

2. 检查并修改父组件代码

找到引用该img的父组件，查看是否误传了isDisabled属性（比如<Avatar isDisabled={true} />这类代码），若不需要给img传递该属性，直接删除即可。

3. 改用合法自定义属性（不推荐，除非确有需要）

如果确实要在img上保留这个自定义属性，按照错误提示改成全小写的isdisabled，React会将其视为合法的自定义DOM属性：

// 父组件传递时改为小写
<Avatar isdisabled={true} />
// 或直接在img标签上写
<img isdisabled={someValue} ... />

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