Reactjs 使用React的Bot框架语音-文本集成问题

我需要集成Azure bot框架，我也使用

styleOptions

参数做了一些样式， 但是当我尝试传递

webSpeechPonyFillFactory

param时，我没有得到麦克风图标或任何更改

这是我的密码：

import { DirectLine } from 'botframework-directlinejs';
import React, { Component } from 'react';
import ReactWebChat,{ Components, createDirectLine, createCognitiveServicesSpeechServicesPonyfillFactory } from 'botframework-webchat';
import './chat.css'

class Chat extends Component {


  constructor(props) {
    super(props);
    this.state = {
      options: {},
      webSpeechPonyfillFactory: {
        region: 'westus',
        subscriptionKey: "242a*88**************a70b2",
        textNormalization: 'lexical'
      }
    };

    this.directLine = new DirectLine({ token: 'hyyw*********************c' });
  }
  async componentDidMount(){
    this.setState({webSpeechPonyfillFactory : await createCognitiveServicesSpeechServicesPonyfillFactory( { region: 'westus', subscriptionKey: '242a**************0b2',textNormalization: 'lexical' })});
  }

  render() {


    return (
      <div className="chat">
      <ReactWebChat directLine={this.directLine} userID="" webSpeechPonyFillFactory={this.state.webSpeechPonyfillFactory}
        styleOptions={{
          backgroundColor: '#fff',
          bubbleBackground: '#FFFFFF',
          bubbleBorder: 'solid 0px #fff',
          bubbleBorderRadius: 20
        }} />
</div>
    );

  }
}export default Chat;

从'botframework directlinejs'导入{DirectLine}；
从“React”导入React，{Component}；
从“botframework webchat”导入ReactWebChat、{Components、createDirectLine、CreateCognitiveServicesPeechServicesPonyFillFactory}；
导入“./chat.css”
类聊天扩展组件{
建造师（道具）{
超级（道具）；
此.state={
选项：{}，
webSpeechPonyfillFactory：{
地区：'威斯特斯'，
订阅密钥：“242a*88*************a70b2”，
文本规范化：“词汇”
}
};
this.directLine=新的directLine（{token:'hyyw******************************c'}）；
}
异步组件didmount（）{
this.setState（{webSpeechPonyfillFactory:await createCognitiveServicesSpeechServicesPonyfillFactory（{region:'westus'，subscriptionKey:'242a*************************0b2'，textNormalization:'lexical'}）；
}
render（）{
返回(
);
}
}导出默认聊天；

---

当我在JS中实现时，它正在工作，但当我尝试与React集成时：（

您应该将DirectLine连接和Web Speech Ponyfill添加到组件的状态，并将默认值设置为null。然后在componentDidMount方法中，创建DirectLine和Web Speech Ponyfill对象并更新其状态值。最后，在render方法中，检查以确保DirectLine和Web Speech Ponyfill在呈现ReactWebChat之前，对象不为null。如果任何一个值定义不正确，Web Chat都不会按预期呈现。请查看下面的代码段

import React from 'react';

import ReactWebChat, { createDirectLine } from 'botframework-webchat';

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

    this.state = {
      directLine: null,
      webSpeechPonyfill: null
    };
  }

  componentDidMount() {
    this.fetchToken();
    this.fetchSpeechPonyfill();
  }

  async fetchSpeechPonyfill() {
    this.setState({ webSpeechPonyfill: await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({ 
      subscriptionKey: '<SPEECH_SUBSCRIPTION_KEY>', region: 'westus', textNormalization: 'lexical' }) });
  }

  async fetchToken() {
    const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
    const { token } = await res.json();

    this.setState(() => ({
      directLine: createDirectLine({ token })
    }));
  }

  render() {
    return (
      this.state.directLine && this.state.webSpeechPonyfill?
        <ReactWebChat
          className="chat"
          directLine={ this.state.directLine }
          webSpeechPonyfillFactory={ this.state.webSpeechPonyfill }
          { ...this.props }
        />
      :
        <div>Connecting to bot&hellip;</div>
    );
  }
}

从“React”导入React；
从“botframework webchat”导入ReactWebChat，{createDirectLine}；
导出默认类扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
directLine:null，
webSpeechPonyfill:null
};
}
componentDidMount（）{
this.fetchToken（）；
this.fetchSpeechPonyfill（）；
}
异步fetchSpeechPonyfill（）{
this.setState（{webSpeechPonyfill:Wait window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory（{
subscriptionKey:''，region:'westus'，textNormalization:'lexical'}）}）；
}
异步fetchToken（）{
const res=等待取数（'https://webchat-mockbot.azurewebsites.net/directline/token“，{方法：'POST'}）；
const{token}=await res.json（）；
此.setState（（）=>({
directLine:createDirectLine（{token}）
}));
}
render（）{
返回(
this.state.directLine&&this.state.webSpeechPonyfill？
:
连接到bot&hellip；
);
}
}

希望这有帮助