[英]Convert Class Component to Functional Component
I will try to explain the task and then tell you my problem.我将尝试解释任务,然后告诉你我的问题。 My task is to add a webcam component which can take a picture and then upload the picture on click of button.我的任务是添加一个可以拍照的网络摄像头组件,然后单击按钮上传图片。
I am using react-webcam library, this one: https://www.npmjs.com/package/react-webcam And have a created a class component “ class UploadPhoto extends Component
” in which I am rendering the react-webcam (Webcam tag ) and able to display the webcam successfully.我正在使用 react-webcam 库,这个: https://www.npmjs.com/package/react-webcam并创建了一个 class 组件“ class UploadPhoto extends Component
渲染了 react-webcam 组件” tag ) 并且能够成功显示网络摄像头。
However, when I add the following attribute ( ref={webcamRef}
) to tag, I receive an error that I am making an invalid hookcall, because webcamRef is initalized to a hook useRef(null).但是,当我将以下属性 ( ref={webcamRef}
) 添加到标记时,我收到一个错误,指出我正在进行无效的钩子调用,因为 webcamRef 已初始化为钩子 useRef(null)。 As below:如下:
const webcamRef = React.useRef(null);
Error:错误:
Uncaught Invariant Violation: Invalid hook call.未捕获的不变违规:无效的挂钩调用。 Hooks can only be called inside of the body of a function component.钩子只能在 function 组件的主体内部调用。
I am aware that we cannot call hooks in the class component, so my question is how do I convert my class component into a functional component, so that I can use this hook, which will help me to capture a photo.我知道我们不能在 class 组件中调用钩子,所以我的问题是如何将我的 class 组件转换为功能组件,以便我可以使用这个钩子,这将有助于我拍摄照片。
Please let me know if you need any more information from me.如果您需要我提供更多信息,请告诉我。
Thank you.谢谢你。 PS - I am fairly new to ReactJS and trying my way in to learn it. PS - 我对 ReactJS 还很陌生,并正在尝试学习它。
Following is my class component for UploadPhoto:以下是我用于 UploadPhoto 的 class 组件:
import React, { Fragment, useRef, Component } from 'react';
import ReactDOM from 'react-dom';
import { Camera } from '../../lib';
import Header from '../header';
import Webcam from "react-webcam";
import {
Button,
} from 'reactstrap';
import axios from "axios/index";
class UploadPhoto extends Component {
constructor(props) {
super(props);
this.capture = this.capture.bind(this)
this.next = this.next.bind(this)
}
capture(imgSrc) {
console.log("image captured : " + imgSrc);
}
next() {
console.log("next button clicked")
//go to review details component
// this.props.history.push("/review-details");
}
render() {
const webcamRef = React.useRef(null);
return (
<div className="text-center">
<div>
Take a Picture
</div>
<Webcam
audio={false}
height={500}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={600} >
<Button className="position-relative text-center" onClick={this.capture}>Capture photo</Button>
</Webcam>
<div>
<Button className="position-relative text-center btn-start" onClick={this.next}>NEXT</Button>
</div>
</div>
);
}
}
export default UploadPhoto;
While you could convert your component to a functional component, that's not necessary to solve this issue.虽然您可以将组件转换为功能组件,但这并不是解决此问题所必需的。 Refs can be used in class components too, you just can't do so with useRef
. Refs 也可以在 class 组件中使用,但你不能使用useRef
这样做。 Instead, use createRef
:相反,使用createRef
:
constructor(props) {
super(props);
this.capture = this.capture.bind(this)
this.next = this.next.bind(this)
this.webcamRef = React.createRef();
}
componentDidMount() {
const imageSrc = this.webcamRef.current.getScreenshot();
this.capture(imagesrc);
}
render() {
return (
<div className="text-center">
<div>
Take a Picture
</div>
<Webcam
audio={false}
height={500}
ref={this.webcamRef}
screenshotFormat="image/jpeg"
width={600} >
<Button className="position-relative text-center" onClick={this.capture}>Capture photo</Button>
</Webcam>
<div>
<Button className="position-relative text-center btn-start" onClick={this.next}>NEXT</Button>
</div>
</div>
);
}
Since the question was how to convert class to functional component, here's the same component as a function:由于问题是如何将 class 转换为功能组件,因此这里是与 function 相同的组件:
import React, { Fragment, useRef, Component } from 'react';
import ReactDOM from 'react-dom';
import { Camera } from '../../lib';
import Header from '../header';
import Webcam from "react-webcam";
import {
Button,
} from 'reactstrap';
import axios from "axios/index";
const UploadPhoto = props => {
const webcamRef = useRef(null);
const capture = () => {
const imgSrc = webcamRef.current.getScreenshot();
console.log("image captured : " + imgSrc);
}
const next = () => {
console.log("next button clicked");
//go to review details component
// props.history.push("/review-details");
}
return (
<div className="text-center">
<div>
Take a Picture
</div>
<Webcam
audio={false}
height={500}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={600} >
<Button className="position-relative text-center" onClick={capture}>Capture photo</Button>
</Webcam>
<div>
<Button className="position-relative text-center btn-start" onClick={next}>NEXT</Button>
</div>
</div>
)
}
export default UploadPhoto;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.