reactjs - 类型 'string' 不可分配给类型 '"inherit"| "initial"| "unset"| "fixed"| "absolute"| "static"| "relative"| "sticky"'

Question

我在我的应用程序(npm 5.4.2、react 15.4、typescript 2.5.3、webpack 2.2.1、webpack-dev-server 2.4.1)中收到以下错误。

这会起作用:

<div style={{position: 'absolute'}}>working</div>

这不会编译:

const mystyle = {
    position: 'absolute'            
} 

<div style={mystyle}>not working</div>

编译错误为:

ERROR in ./src/components/Resource.tsx
(61,18): error TS2322: Type '{ style: { position: string; }; children: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ style: { position: string; }; children: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property 'style' are incompatible.
      Type '{ position: string; }' is not assignable to type 'CSSProperties'.
        Types of property 'position' are incompatible.
          Type 'string' is not assignable to type '"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"'.
webpack: Failed to compile.

但是有什么区别呢？我可以修复它:

const mystyle = {
    position: 'absolute' as 'absolute'            
} 

但这是一个好的解决方案吗？

我对其他样式/CSS 属性没有这个问题。

我在github上发现了类似的问题: https://github.com/Microsoft/TypeScript/issues/11465但如果理解正确，那是早期版本中的 typescript 错误。

感谢任何帮助。

Answer 1

这是一种解决方法，但没关系。其他一些解决方案是:

const mystyles = {
   position: 'absolute',
} as React.CSSProperties;

您可以在 issue 时回来查看将得到解决。我猜是在 TS 2.6 左右，从里程碑来看。