错误 "LexAudio.conversation is not a constructor"。 React 组件调用 vanilla javascript
Error "LexAudio.conversation is not a constructor". React component calling vanilla javascript
下面是调用外部 vanilla aws lex javascript 进行对话的 React 组件。 call new LexAudio.conversation(...) 会出现问题
将外部js库导入react组件的最佳方式是什么。
class MyComponent extends Component {
startConversation() {
AWS.config.credentials = new AWS.Credentials('', '', null);
AWS.config.region = 'us-east-1';
var waveform = require('./renderer_1.js');
var waveform = window.Waveform();
var config = {
lexConfig: { botName: 'testbot' }
};
var message = document.getElementById('message');
var LexAudio = require('./aws-lex-audio.js');
var conversation = new LexAudio.conversation(config, function (state) {
message.textContent = state + '...';
if (state === 'Listening') {
waveform.prepCanvas();
}
if (state === 'Sending') {
waveform.clearCanvas();
}
}, function (data) {
console.log('Transcript: ', data.inputTranscript, ", Response: ", data.message);
}, function (error) {
//message.textContent = error;
}, function (timeDomain, bufferLength) {
waveform.visualizeAudioBuffer(timeDomain, bufferLength);
});
conversation.advanceConversation();
}
render() {
return (
<div className='Hello'>`enter code here`
<meta charSet="UTF-8" />
<link rel="stylesheet" href="style.css" />
<div className="audio-control" onClick={this.startConversation}>
<p id="audio-control" className="white-circle">
<img alt="new" src="./lex.png" />
<canvas className="visualizer" />
</p>
<p><span id="message" /></p>
</div>
</div>
);
};
}
export default MyComponent;
感谢您的帮助。
尝试导入页面顶部的 LexAudio。您的大部分进口商品都应该放在这里。
类似于:
import LexAudio from './aws-lex-audio.js';
而不是:
var LexAudio = require('./aws-lex-audio.js');
下面是调用外部 vanilla aws lex javascript 进行对话的 React 组件。 call new LexAudio.conversation(...) 会出现问题 将外部js库导入react组件的最佳方式是什么。
class MyComponent extends Component {
startConversation() {
AWS.config.credentials = new AWS.Credentials('', '', null);
AWS.config.region = 'us-east-1';
var waveform = require('./renderer_1.js');
var waveform = window.Waveform();
var config = {
lexConfig: { botName: 'testbot' }
};
var message = document.getElementById('message');
var LexAudio = require('./aws-lex-audio.js');
var conversation = new LexAudio.conversation(config, function (state) {
message.textContent = state + '...';
if (state === 'Listening') {
waveform.prepCanvas();
}
if (state === 'Sending') {
waveform.clearCanvas();
}
}, function (data) {
console.log('Transcript: ', data.inputTranscript, ", Response: ", data.message);
}, function (error) {
//message.textContent = error;
}, function (timeDomain, bufferLength) {
waveform.visualizeAudioBuffer(timeDomain, bufferLength);
});
conversation.advanceConversation();
}
render() {
return (
<div className='Hello'>`enter code here`
<meta charSet="UTF-8" />
<link rel="stylesheet" href="style.css" />
<div className="audio-control" onClick={this.startConversation}>
<p id="audio-control" className="white-circle">
<img alt="new" src="./lex.png" />
<canvas className="visualizer" />
</p>
<p><span id="message" /></p>
</div>
</div>
);
};
}
export default MyComponent;
感谢您的帮助。
尝试导入页面顶部的 LexAudio。您的大部分进口商品都应该放在这里。
类似于:
import LexAudio from './aws-lex-audio.js';
而不是:
var LexAudio = require('./aws-lex-audio.js');