类型“字符串”不可分配给类型“位置”

我现在正在将 React js 修改为 ts。它是类组件。

我想通过 props 获取 css 设置并将其应用于 Element。

我应该如何解决这个问题?

render(){return(
<span style={{
          position: this.props.position ,
          left: this.props.left,
          top: this.props.top,
          height: this.props.height,
          width: this.props.width
     }} /> </span>)}
stack overflow Type 'string' is not assignable to type 'Position'
原文答案
author avatar

接受的答案

Typescript 期望该字符串实际上是 position 属性的选项之一 - absoluterelative 等 解决它的一种方法是告诉他你知道类型是可以的,就像这样:

<span style={{
          position: this.props.position,
          left: this.props.left,
          top: this.props.top,
          height: this.props.height,
          width: this.props.width
     }:  as React.CSSProperties} /> </span>)}

另一种选择是转到位置属性最初定义的位置(父元素)并让 Typescript 强制类型,例如:

const styles: ('absolute' | 'relative' | 'fixed') = 'absolute';

答案:

作者头像

无需转换对象,只需在初始化时声明类型 React.CSSProperties 即可。

  function MyComponent(props) {
    const styles: React.CSSProperties = {
      position: this.props.position,
      left: this.props.left,
      top: this.props.top,
      height: this.props.height,
      width: this.props.width
    };

    return (
      <span style={styles}></span>
    );
  }

相关问题