在 React.js 中将 Arrow Function 转换为 Class

Question

I am very new to react.js. I need to implement constructor and more functions which I am aware in Class. I tried but I am getting useRef and useCallback error. So below are the code I want to convert Arrow function to Class. Please help I am very very new to React.js

const Webcams = () => {
  const webcamRef = React.useRef(null);

  const capture = React.useCallback(
    () => {

      const imageSrc = webcamRef.current.getScreenshot();
      console.log(imageSrc);
      image64 = imageSrc;
      var newImg = imageSrc.replace('data:image/jpeg;base64,', '');

      var rand = makeid(5)+'.jpg';

      const uploadTask = storage.ref(`images/${rand}`).putString(newImg,'base64');
      uploadTask.on('state_changed',
      (snapshot) => {

        const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
        console.log(progress);
      },
      (error) => {

        console.log(error);
      },
      () => {

        storage.ref('images').child(rand).getDownloadURL().then(url => {
            console.log(url);

            firebase
            .firestore()
            .collection('notes')
            .add({
              url: url
            })
            .then(() => {
               console.log('Finished');
            })
        })
      });
    },
    [webcamRef]
  );

  const show = React.useCallback(
    () => {

      var f = document.getElementById('flash');
         setTimeout(function() {
            f.style.display = (f.style.display == 'none' ? '' : 'show');
         }, 100);
    },
  );

  return (
    <div>
    <div id="flash"> </div>
    <div className="web">
      <Webcam
        audio={false}
        height={400}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
        width={400}
        videoConstraints={videoConstraints}
      />
      <span><button onClick={capture}></button></span>
      </div>

      </div>

  );
};

something like this Class

class Webcams extends React.Component {

    // Some Code ....

    }

Answer 1

import React, { Component } from 'react';

class Welcome extends Component {
  constructor(props) {
    super(props);

    this.webcamRef = React.createRef();
  }

  capture = () => {
      const imageSrc = this.webcamRef.current.getScreenshot();
      ...
  }

  show = () => {
    ...
  }

  render() {
    return (
      <div>
        <div id="flash"> </div>
          <div className="web">
          <Webcam
            audio={false}
            height={400}
            ref={this.webcamRef}
            screenshotFormat="image/jpeg"
            width={400}
            videoConstraints={videoConstraints}
          />
          <span><button onClick={this.capture}></button></span>
        </div>
      </div>
    );
  }
}

Answer 2

You need to import React

import React, { Component } from 'react';