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

1 个答案: