Как использовать React.useRef() в компоненте класса?

Question

Мне нужно, чтобы этот код был реализован в компоненте класса. Это нужно для того, чтобы использовать прогресс загрузки в моем компоненте класса с помощью response-toastify

function Example(){
  const toastId = React.useRef(null);
  function handleUpload(){
    axios.request({
      method: "post", 
      url: "/foobar", 
      data: myData, 
      onUploadProgress: p => {
        const progress = p.loaded / p.total;
        if(toastId.current === null){
            toastId = toast('Upload in Progress', {
            progress: progress
          });
        } else {
          toast.update(toastId.current, {
            progress: progress
          })
        }
      }
    }).then(data => {
      
      toast.done(toastId.current);
    })
  }
  return (
    <div>
      <button onClick={handleUpload}>Upload something</button>
    </div>
  )
}

Как я могу это сделать?

Answer 1

useRef() находится среди хуков реакции, а хуки предназначены для использования в функциональных компонентах, но если вы хотите создать ссылку в компоненте на основе классов,

вы можете сделать это из конструктора класса, как показано ниже:

  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

Проверьте React.createRef().

Answer 2

Назначьте свое значение в конструкторе, т.е. свяжите с .

createRef !== useRef, useRefиспользуется для сохранения значения при повторном рендеринге, и для этого в компоненте класса вам необходимо связать его с thisнет createRef

Answer 3

Как использовать React.useRef() в классе, расширяющем компонент:

      import { Component, createRef } from "react";

export default class App extends Component{
 constructor(props){
    super(props);
   
    this.myP = createRef();
    window.addEventListener("load", ()=>this.prompt());
 }
 prompt(){
     this.myP.current.innerText = 'Hello World!'
 }
 render(){
    return(
        <>
          <p ref={this.myP} />        
        </>
    );
 }
}