0

我已经使用 Bot Framework (v4 NodeJS) 开发了一个 SharePoint Bot，为了确保一致的用户体验，我一直在考虑通过 SPFX 应用程序定制器应用程序使用 React DirectLine 通道将其整合到 Office UI Fabric React 面板中。

我遇到的问题是我收到了一些我怀疑相关的错误；一个是在开发人员工具控制台中显示'Cannot read property 'subscribe' of undefined'。

另一个错误是在显示“渲染错误”的 Fabric 面板中。请检查控制台或联系机器人开发人员。

反应面板 反应错误

BotPanel.tsx

import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
import * as React from 'react';
import ReactWebChat from 'botframework-webchat';
import { DirectLine } from 'botframework-directlinejs';

export interface IPanelFooterExampleState {
  showPanel: boolean;
}

export default class extends React.Component {
  constructor(props) {
    super(props);

    new DirectLine({ token: 'DIRECT_LINE_TOKEN' });
  }

  public state = {
    showPanel: false
  };

  public render() {
    return (
      <div>
        <DefaultButton secondaryText="Ask SharePoint Bot" onClick={this._showPanel} text="Ask SharePoint Bot" />
        <Panel
          isOpen={this.state.showPanel}
          type={PanelType.medium}
          onDismiss={this._hidePanel}
          isFooterAtBottom={true}
          headerText="Ask SharePoint Bot"
          closeButtonAriaLabel="Close"
          onRenderFooterContent={this._onRenderFooterContent}
        >
          <span>
          <ReactWebChat directLine={{ DirectLine }} />
          </span>
        </Panel>
      </div>
    );
  }

  private _onRenderFooterContent = (): JSX.Element => {
    return (
      <div>
        <DefaultButton onClick={this._hidePanel}>End Conversation
        </DefaultButton>
      </div>
    );
  };

  private _showPanel = () => {
    this.setState({ showPanel: true });
  };

  private _hidePanel = () => {
    this.setState({ showPanel: false });
  };
}

BotPanelApplicationCustomizer.ts

import { override } from '@microsoft/decorators';
import {
  BaseApplicationCustomizer,
  PlaceholderContent,
  PlaceholderName
} from '@microsoft/sp-application-base';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import PanelFooterExample from './BotPanel';

const LOG_SOURCE: string = 'BotReactPanelApplicationCustomizer';

/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */
export interface IBotReactPanelApplicationCustomizerProperties {
  // This is an example; replace with your own property
  testMessage: string;
}

/** A Custom Action which can be run during execution of a Client Side Application */
export default class BotReactPanelApplicationCustomizer
  extends BaseApplicationCustomizer<IBotReactPanelApplicationCustomizerProperties> {
    @override
      public onInit(): Promise<void> {

      // render method of the webpart, actually calls Component
      const topPlaceholder =  this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);
      const element = React.createElement(PanelFooterExample);

      // reactDom.render(element, this.domElement);
      ReactDom.render(element, topPlaceholder.domElement);
    return Promise.resolve();
  }
}

我是 React 的新手，所以仍然可以适应它。但我认为 Fabric 组件需要出现在 TSX 文件中，我已经附上了该文件的代码。我猜我错过了将 DirectLine 和 Panel 连接在一起的序列？

我希望在 Fabric 面板中显示 Bot DirectLine 频道，以便为用户提供一致的 SharePoint 体验。

4

1 回答 1

0

我想我已经弄清楚了我所缺少的内容，并参考了这篇非常有用的帖子。

如何在 react-Nodejs Web 应用程序中传递令牌（数据）（从 nodejs 文件到 react tsx 文件）

于 2019-07-15T19:40:14.167 回答