将 Class 组件转换为功能组件

Question

我将尝试解释任务，然后告诉你我的问题。 我的任务是添加一个可以拍照的网络摄像头组件，然后单击按钮上传图片。

我正在使用 react-webcam 库，这个： https://www.npmjs.com/package/react-webcam并创建了一个 class 组件“ class UploadPhoto extends Component渲染了 react-webcam 组件” tag ) 并且能够成功显示网络摄像头。

但是，当我将以下属性 ( ref={webcamRef} ) 添加到标记时，我收到一个错误，指出我正在进行无效的钩子调用，因为 webcamRef 已初始化为钩子 useRef(null)。 如下：

const webcamRef = React.useRef(null);

错误：

未捕获的不变违规：无效的挂钩调用。 钩子只能在 function 组件的主体内部调用。

我知道我们不能在 class 组件中调用钩子，所以我的问题是如何将我的 class 组件转换为功能组件，以便我可以使用这个钩子，这将有助于我拍摄照片。

如果您需要我提供更多信息，请告诉我。

谢谢你。 PS - 我对 ReactJS 还很陌生，并正在尝试学习它。

以下是我用于 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;

Answer 1

虽然您可以将组件转换为功能组件，但这并不是解决此问题所必需的。 Refs 也可以在 class 组件中使用，但你不能使用useRef这样做。 相反，使用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>
    );
}

Answer 2

由于问题是如何将 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;