TypeScript+React给img加CSS属性报not assignable to DetailedHTMLProps错如何解决

问题根源 #

你把CSS属性直接当成了<img>标签的HTML属性传入，React原生HTML元素只接受合法HTML属性作为标签参数，left、position、top都属于CSS属性，不能直接挂在元素标签上，必须统一封装到style属性中。另外你写的z-index也不符合React的行内样式规则，需要转成小驼峰写法zIndex。

修正方案 #

调整<img>标签写法，把所有样式规则放到style属性对象中，单位拼接也放在对象内部处理即可：

import stuff from 'stuff';
// 建议先定义blob类型，避免用any，类型更安全
type BlobItem = {
  id: number;
  blob: string;
  zIndex: number;
  position: string;
  left: number;
  top: number;
  transform: number;
}

const Home = () => {
    const blobs: BlobItem[] = [
    {
      id: 1,
      blob: yellowBlob1,
      zIndex: -1,
      position: 'absolute',
      left: -7.97,
      top: -5.25,
      transform: 0,
    },
    {
      id: 2,
      // 其余blob配置
    }
    ]

    return(
        <>
            <BlobRow>
                {blobs.map((blobItem) => (
                    <Col key={blobItem.id}>
                        <img
                            alt=''
                            src={blobItem.blob}
                            style={{
                              position: blobItem.position,
                              left: `${blobItem.left}rem`,
                              top: `${blobItem.top}rem`,
                              // transform按实际需求拼接单位和规则，示例为旋转角度
                              transform: `rotate(${blobItem.transform}deg)`,
                              zIndex: blobItem.zIndex
                            }}
                        />
                    </Col>
                ))}
            </BlobRow>
            {/* 其余代码 */}
        </>
    );
};

注意事项 #

• React的style属性接收的是一个对象，所有CSS属性名必须用小驼峰写法，比如background-color要写成backgroundColor
• 数值类型的CSS值如果需要使用rem、%等非px单位，要手动拼接成带单位的字符串
• 只有src、alt、id、className这类合法HTML属性才能直接挂在元素标签上

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