如何在类组件中使用 React.useRef()?

Question

我需要在类组件中实现此代码。 这是为了在我的类组件中使用带有 react-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

在构造函数中分配您的值，即与this绑定。

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} />        
</>
);
}
}