如何将功能组件转换为类组件？

Question

您好，我正在为我的协作白板做语音识别。我的白板组件是一个类组件，我想将语音识别的代码(这是一个功能组件)放在白板组件中。但是我需要把它转换成一个类组件。我使用的是库react-speech-recognition，这是需要转换的代码：

import React from 'react'
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'

const Mic = () => {
    const { transcript, resetTranscript } = useSpeechRecognition()

    if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
        return null
    }

    return (
        <div>
            <button onClick={SpeechRecognition.startListening}>Start</button>
            <button onClick={SpeechRecognition.stopListening}>Stop</button>
            <button onClick={resetTranscript}>Reset</button>
            <p>{transcript}</p>
        </div>
    )
}
export default Mic

有谁能教我怎么做吗？在transcript和resetTranscript变量中使用语音识别函数会让我觉得更难。

Answer 1

您的钩子useSpeechRecognition有问题，您不能在类组件中使用它，您可以检查React文档来验证：Hooks FAQ，作为替代，您应该使用HOC SpeechRecognition

import React, { Component } from 'react'
import SpeechRecognition from 'react-speech-recognition'

class Mic extends Component {
  render() {
    const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props

    if (!browserSupportsSpeechRecognition) {
      return null
    }
    
    return (
      <div>
        <button onClick={SpeechRecognition.startListening}>Start</button>
        <button onClick={SpeechRecognition.stopListening}>Stop</button>
        <button onClick={resetTranscript}>Reset</button>
        <p>{transcript}</p>
      </div>
    )
  }
}

export default SpeechRecognition(Mic)