React Refs With Typescript

I have literally read through refs all day and am struggling with converting a component from JS to TSX

This is the error I am dealing with now:

Type ‘RefObject<SVGElement>’ is not assignable to type ‘string | ((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined’.
Type ‘RefObject<SVGElement>’ is not assignable to type ‘RefObject<SVGSVGElement>’.
Type ‘SVGElement’ is missing the following properties from type ‘SVGSVGElement’: contentScriptType, contentStyleType, currentScale, currentTranslate, and 45 more.ts(2322)

import React, { useEffect, useRef, createRef } from 'react' import ReactDOM from 'react-dom' const TOP_OFFSET = window.innerHeight; const LEFT_OFFSET = 250; const generateWholeNumber = (min:number, max:number) => min + Math.floor(Math.random()*(max - min)); const SIZE_RANGE: [number, number] = [20, 70]; const ROTATION_RANGE: [number, number] = [0, 45]; interface ParticleTypeInt { part1Ref?: any; } class ParticleType1 extends React.PureComponent<ParticleTypeInt> { style: { width: number; height: number; borderRadius: number; transform: string; left: number; top: number; }; private part1Ref: React.RefObject<SVGElement>; constructor(props: any) { super(props); const size = generateWholeNumber(...SIZE_RANGE); this.style = { width: size, height: size, borderRadius: size, transform: `rotateZ(${generateWholeNumber(...ROTATION_RANGE)}deg)`, left: generateWholeNumber(0, window.innerWidth), top: generateWholeNumber(-TOP_OFFSET, 0), }; this.part1Ref = React.createRef(); } componentDidMount() { const { left } = this.style; setTimeout(() => { debugger; const node = this.props.part1Ref; if (node) { node.style.top = window.innerHeight + generateWholeNumber(0, TOP_OFFSET) + "px"; node.style.left = left + generateWholeNumber(-LEFT_OFFSET, LEFT_OFFSET) + "px"; } }, 0); } ref(ref: any) { throw new Error('Method not implemented.'); } render() { return ( 

<svg id=”myId” data-name=”id1″ xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 500 500″ ref={this.part1Ref} className=”particle” style={this.style}

SVG is here </svg> ); } }

export default ParticleType1;

and my version of react

"react": "^17.0.1", 

I have tried changing to many different things from HTMLElement and so on, but just trade one error out for another. All help would be appreciated.

submitted by /u/Educational_Wrap_148
[link] [comments]