在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屋！