Question

我正在尝试创建对react + typescript的引用：

class BarChart extends Component {
  private node: React.RefObject<SVGSVGElement | null>;
  constructor(props) {
    super(props);
    this.node = React.createRef();
  }
... 
}

这是我要参考的svg代码：

<svg ref={node => (this.node = node)} width={500} height={500} />

但是我得到这个错误：

Type 'SVGSVGElement | null' is not assignable to type 'RefObject<SVGSVGElement | null>'.
  Type 'null' is not assignable to type 'RefObject<SVGSVGElement | null>'.

有帮助吗？我是新来的人

Answer 1

ref属性需要React.RefObject<TElement>或回调(TElement | null) => void或null。

有两种方法可以使代码工作：

将this.node传递到ref属性：

    <svg ref={this.node} width={500} height={500} />

将this.ref的类型更改为SVGSVGElement | null：
```
    private ref: SVGSVGElement | null = null;
```

用打字稿在ref上创建svg节点？

1 个答案: