在 React 组件中使用 botframework-webchat 的正确方法（使用 create-react-app）？

Question

我使用 create-react-app 创建了一个应用程序，然后使用官方 github instructions 与 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

我在这里错过了什么？谢谢！

Answer 1

请注意，（在撰写本文时）官方回购中的说明存在错误：

import DirectLine from 'botframework-directlinejs';

应该是：

import { DirectLine } from 'botframework-directlinejs';

更改此设置，botframework-webchat v4 可与 React 16 一起使用，并按照 github 页面上的说明进行操作。

如果你想使用 botframework-webchat 的 v3，下面的代码对我有用：

经过一些试验和 digging 在其他回购协议中，以下是我如何使用干净的 create-react-app 实例来做到这一点：

在/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:

<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） :

{
  "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 中设置您的秘密！

在 React 组件中使用 botframework-webchat 的正确方法（使用 create-react-app）？

Proper way to use botframework-webchat in React component (using create-react-app)?

reactjs

botframework

direct-line-botframework