Создание узла SVG на ref с машинописью?

Question

Я пытаюсь создать ссылку на реагирование + машинопись:

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.

Есть два способа заставить ваш код работать:

1. Передача this.node в ref атрибут:

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

2. Измените тип this.ref на SVGSVGElement | null:

       private ref: SVGSVGElement | null = null;