代码之家 › 专栏 › 技术社区 › Anthony Kong

由于错误“TS2339:React组件内的类型“Y”上不存在属性“X”,无法设置引用

typescript reactjs

Anthony Kong · 技术社区 · 6 年前

使用typescript,我有以下道具 type 和组件 class 定义:

type AnimatedElementProps = {
  node: HTMLElement;
  Svg(props: SVGProps): JSX.Element,
 };

class AnimatedElement extends React.Component<AnimatedElementProps> {

  constructor(props) {
    super(props);
    this.node = undefined;
  }

  render = () => {
    return (
          <div
              ref={(n) => this.node = n}
              className={styles.animatedElement}
              style={defaultStyle}
          >
            <Svg/>
          </div>
    );
  };
}

我想捕捉 ref 到DIV元素 render 功能,但是我一直得到:

错误TS2339:类型“animatedElement”上不存在属性“node”。

使用typescript在react组件中定义和初始化自定义类变量的正确方法是什么?

1 回复 | 直到 6 年前

Dacre Denny 6 年前

如果我正确理解了您的问题,那么这看起来像是类定义中缺少字段的情况。您应该发现声明字段:

private node?: HTMLElement;

在类定义中,解决以下问题:

class AnimatedElement extends React.Component<AnimatedElementProps> {

  private node?: HTMLElement; /* <-- Add this */

  constructor(props) {
    super(props);
    this.node = undefined;
  }

  render = () => {
    return (
          <div
              ref={(n) => this.node = n}
              className={styles.animatedElement}
              style={defaultStyle}
          >
            <Svg/>
          </div>
    );
  };
}

还要注意的是, node? 带问号的语法。这个 ? 表示字段可以有类型 HTMLElement 或 undefined . 这是必要的,因为要确保您最初分配 未定义 到类构造函数中的字段。