SVG元素'enable-background'的正确结构？React+TypeScript升级适配问题

嘿，刚好碰到过类似的问题，我来给你梳理清楚！

首先得明确：enable-background 是SVG的全局属性，并不是CSS样式属性——这也是你之前把它放在style里其实不符合规范的原因，只是旧版本的React或类型定义没严格校验而已。

在React（尤其是配合TypeScript）中，正确的做法是直接把它作为<svg>元素的属性来传递，而不是嵌套在style对象里。结合你使用的@types/react v16.3.9，这个属性已经被包含在SVGProps<SVGElement>的类型定义中，所以直接用不会有类型报错。

修改后的代码应该是这样的：

import * as React from "react";

export class CaretSvgRight extends React.PureComponent<React.SVGProps<SVGElement>, object> {
  render() {
    return (
      <svg enableBackground="new 0 0 292.359 292.359" {...this.props}>
        {/* 你的SVG内部元素内容 */}
      </svg>
    );
  }
}

额外小提示： #

• 如果希望组件接收的props里的enableBackground能覆盖你默认设置的值，只需要把{...this.props}放在enableBackground属性的前面就行，比如：

  <svg {...this.props} enableBackground="new 0 0 292.359 292.359">
  

  反之，如果要让默认值优先，就保持原来的顺序。
• 升级到React 16.3后可能出现报错，是因为新版本的类型定义对SVG属性和CSS样式的区分更严格了，之前的不规范写法现在会被TypeScript拦截，这其实是件好事，能帮我们写出更标准的代码。

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