在React组件中使用botframework-webchat的正确方法(使用create-react-app)? [英] Proper way to use botframework-webchat in React component (using create-react-app)?
问题描述
我已经使用create-react-app创建了一个应用,然后使用了官方 github上的说明与React(v16.6.3)集成:
I've created an app using create-react-app, then used the official github instructions for integrating with React (v16.6.3):
import DirectLine from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat from 'botframework-webchat';
export default class extends React.Component {
constructor(props) {
super(props);
this.directLine = new DirectLine({ token: 'YOUR_BOT_SECRET' });
}
render() {
return (
<ReactWebChat directLine={ this.directLine } />
element
);
}
}
但是,我遇到此错误:
TypeError: botframework_directlinejs__WEBPACK_IMPORTED_MODULE_5___default.a is not a constructor
我在这里想念什么?谢谢!
What am I missing here? Thanks!
推荐答案
请注意,(在撰写本文时)官方存储库中的说明中存在错误:
Note, there is (at time of writing this) an error in the instructions in the official repo:
import DirectLine from 'botframework-directlinejs';
应为:
import { DirectLine } from 'botframework-directlinejs';
更改此设置,并且botframework-webchat v4可与React 16配合使用,并在github页上进行说明.
Change this, and botframework-webchat v4 works with React 16, with the instructions on the github page.
如果您想使用botframework-webchat v3,以下代码对我有用:
If you want to use v3 of botframework-webchat, the following code worked for me:
经过一些试验并在其他存储库中挖掘,这就是我的做法能够使用干净的create-react-app实例来做到这一点:
After some experimenting and digging in other repos, here's how I was able to do this using a clean create-react-app instance:
在/src/App.js中:
in /src/App.js:
import React, { Component } from 'react';
import * as WebChat from 'botframework-webchat';
class App extends Component {
constructor(props) {
super(props);
this.state = { token: null };
}
async componentDidMount() {
const myHeaders = new Headers()
var myToken = process.env.REACT_APP_DIRECTLINE_SECRET
myHeaders.append('Authorization', 'Bearer ' + myToken)
const res = await fetch(
'https://directline.botframework.com/v3/directline/tokens/generate',
{
method: 'POST',
headers: myHeaders
}
)
const { token } = await res.json()
this.setState(() => ({ token }))
}
render() {
const {
state: { token }
} = this;
return (
!!token &&
<WebChat.Chat
directLine={{
token,
webSocket: false
}}
style={{
height: '100%',
width: '100%'
}}
user={{
id: 'default-user',
name: 'Some User'
}}
/>
);
}
}
export default App;
在/public/index.html中的标题标签之前添加以下行:
Add this line before the title tag in /public/index.html:
<link
rel="stylesheet"
href="https://cdn.botframework.com/botframework-webchat/0.14.2/botchat.css"
/>
package.json-注意我使用的是botframework-webchat的0.14.2版本,我无法在主发行版(目前为4.1.1)上使用它:
package.json -- note I'm using the 0.14.2 version of botframework-webchat, I can't get it to work on the master release (4.1.1 as of right now):
{
"name": "react-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"botframework-webchat": "^0.14.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "^2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
别忘了在.env中设置您的秘密!
And don't forget to set your secret in .env!
这篇关于在React组件中使用botframework-webchat的正确方法(使用create-react-app)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!