Javascript 如何在React中将值从函数传递给类？

目标

我的目标是从函数Dictaphone中获取

transcript

值，并将其传递到SearchBar类，最后将state

术语设置为
transcript

当前代码

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

const Dictaphone = () => {
    const { transcript } = useSpeechRecognition()

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

    return (
        <div>
            <button onClick={SpeechRecognition.startListening}>Start</button>
            <p>{transcript}</p>
        </div>
    )
}



class SearchBar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            term: ''
        }

        this.handleTermChange = this.handleTermChange.bind(this);
    }

    handleTermChange(event) {
        this.setState({ term: event.target.value });
    }


    render() {
        return (
            <div className="SearchBar">
                <input onChange={this.handleTermChange} placeholder="Enter some text..." />
                <Dictaphone />
            </div>
        )
    }
}

export { SearchBar };

错误

但我得到了这个错误：

不能在类组件中调用React挂钩“useSpeechRecognition”。必须在React函数组件或自定义React钩子函数React钩子/钩子规则中调用React钩子
必须在React函数组件或自定义React钩子函数中调用React钩子

useSpeechRecognition
是一种特殊类型的功能，仅在特定情况下有效。不能在基于类的组件中使用挂钩；它们只在基于函数的组件或自定义挂钩中工作。有关所有限制，请参阅

因为这个钩子是由第三方库提供的，所以您有两个选择。一种是将搜索栏组件重写为函数。如果您不熟悉挂钩，这可能需要一些时间

您还可以查看react speechrecognition

库是否提供了用于基于类的组件的实用程序。

useSpeechRecognition

是一种特殊类型的函数，仅在特定情况下工作。不能在基于类的组件中使用挂钩；它们只在基于函数的组件或自定义挂钩中工作。有关所有限制，请参阅

因为这个钩子是由第三方库提供的，所以您有两个选择。一种是将搜索栏组件重写为函数。如果您不熟悉挂钩，这可能需要一些时间

---

您还可以查看react speech recognition库是否提供了用于基于类的组件的实用程序。

嗯，错误很明显。您试图在类组件中使用钩子，但您不能这样做

选项1-将搜索栏更改为功能组件 如果这是可行的，这将是我建议的解决方案，因为您正在使用的库似乎是基于这一点构建的

选择2 类组件和功能组件之间的通信

我是根据你的“现行代码”写的

import React，{useffect}来自“React”；
从“react SpeechRecognition”导入SpeechRecognition，{useSpeechRecognition}；
常量录音机=（{onTranscriptChange}）=>{
const{transcript}=useSpeechRecognition（）；
//当'transcript'更改时，调用一个函数，该函数将作为对父级的回调（搜索栏）
//注意：此代码可能无法按原样完美运行。调用“onTranscriptChange”会导致父级的状态发生更改，因此Dictaphone将重新呈现，可能会导致无限次重新呈现。您需要了解挂钩的行为以适当缓解。
useffect（（）=>{
onTranscriptChange（转录本）；
}[谈话全文];；
if（！SpeechRecognition.BrowserSupportsPeechRecognition（））{
返回空
}
返回(
开始
{转录本}

)
}
类SearchBar扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
转录本：''
}
this.onTranscriptChange=this.onTranscriptChange.bind（this）；
}
onTranscriptChange（转录本）{
this.setState（{transcript}）；
}
render（）{
返回(
)
}
}

嗯，错误很明显。您试图在类组件中使用钩子，但您不能这样做

选项1-将搜索栏更改为功能组件 如果这是可行的，这将是我建议的解决方案，因为您正在使用的库似乎是基于这一点构建的

选择2 类组件和功能组件之间的通信

我是根据你的“现行代码”写的

import React，{useffect}来自“React”；
从“react SpeechRecognition”导入SpeechRecognition，{useSpeechRecognition}；
常量录音机=（{onTranscriptChange}）=>{
const{transcript}=useSpeechRecognition（）；
//当'transcript'更改时，调用一个函数，该函数将作为对父级的回调（搜索栏）
//注意：此代码可能无法按原样完美运行。调用“onTranscriptChange”会导致父级的状态发生更改，因此Dictaphone将重新呈现，可能会导致无限次重新呈现。您需要了解挂钩的行为以适当缓解。
useffect（（）=>{
onTranscriptChange（转录本）；
}[谈话全文];；
if（！SpeechRecognition.BrowserSupportsPeechRecognition（））{
返回空
}
返回(
开始
{转录本}

)
}
类SearchBar扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
转录本：''
}
this.onTranscriptChange=this.onTranscriptChange.bind（this）；
}
onTranscriptChange（转录本）{
this.setState（{transcript}）；
}
render（）{
返回(
)
}
}

class SearchBar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            term: ''
        }

        this.handleTermChange = this.handleTermChange.bind(this);
    }


    handleTermChange(event) {
        this.setState({ term: event.target.value });
    }

    handleSpeech() {
        const { transcript } = useSpeechRecognition()

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

        SpeechRecognition.startListening();

        this.setState({ term: transcript});
    }


    render() {
        return (
            <div className="SearchBar">
                <input onChange={this.handleTermChange} placeholder="Enter some text..." />
                <button onClick={this.handleSpeech}>Start</button>
            </div>
        )
    }
}

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

const Dictaphone = ({ onTranscriptChange }) => {
  const { transcript } = useSpeechRecognition();

  // When `transcript` changes, invoke a function that will act as a callback to the parent (SearchBar)
  // Note of caution: this code may not work perfectly as-is. Invoking `onTranscriptChange` would cause the parent's state to change and therefore Dictaphone would re-render, potentially causing infinite re-renders. You'll need to understand the hook's behavior to mitigate appropriately.
  useEffect(() => {
    onTranscriptChange(transcript);
  }, [transcript]);
    
  if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    return null
  }

  return (
    <div>
      <button onClick={SpeechRecognition.startListening}>Start</button>
      <p>{transcript}</p>
    </div>
  )
}

class SearchBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      transcript: ''
    }
    this.onTranscriptChange = this.onTranscriptChange.bind(this);
  }

  onTranscriptChange(transcript){
    this.setState({ transcript });
  }

  render() {
    return (
      <div className="SearchBar">
        <input onChange={this.handleTermChange} placeholder="Enter some text..." />
        <Dictaphone onTranscriptChange={onTranscriptChange} />
      </div>
    )
  }
}