Преобразовать компонент класса в функциональный компонент

Question

Я постараюсь объяснить задачу, а затем рассказать вам о моей проблеме. Моя задача - добавить компонент веб-камеры, который может сделать снимок, а затем загрузить изображение нажатием кнопки.

Я использую библиотеку реагировать на веб-камеру, вот такую: https://www.npmjs.com/package/react-webcam И у меня есть созданный компонент класса «class UploadPhoto extends Component», в котором я рендерил реагирующую веб-камеру (тег веб-камеры) и могудля успешного отображения веб-камеры.

Однако, когда я добавляю в тег следующий атрибут (ref={webcamRef}), я получаю сообщение об ошибке, что я делаю недопустимый вызов, потому что webcamRef инициализируется для перехвата useRef (null). Как показано ниже:

const webcamRef = React.useRef(null);

Ошибка:

Неизученное инвариантное нарушение: неверный вызов ловушки. Хуки можно вызывать только внутри тела компонента функции.

Я знаю, что мы не можем вызывать хуки в компоненте класса, поэтому мой вопрос заключается в том, как преобразовать мой компонент класса в функционалкомпонент, так что я могу использовать этот крючок, который поможет мне сделать фотографию.

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация от меня.

Спасибо. PS - Я довольно новичок в ReactJS и пытаюсь освоить его.

Ниже приведен мой компонент класса для UploadPhoto:

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

Поскольку вопрос заключался в том, как преобразовать класс в функциональный компонент, вот тот же компонент, что и в функции:

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;

Answer 2

Хотя вы можете преобразовать свой компонент в функциональный компонент, для решения этой проблемы нет необходимости. Ссылки также могут использоваться в компонентах класса, вы просто не можете сделать это с 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>
    );
}