Question

我对rxjs很陌生，并试图了解这里需要什么来暴露Bot框架中的Chat对象，因为我需要调用其中的一些方法，我将添加。我基本上需要从网页访问创建的聊天组件，该组件现在有一个BotChat.App。还有一个BotChat.Chat，但这似乎不是我需要访问的实例。

通过调用BotChat.App（{params}）从Bot Framework中使用以下内容; 这反过来创建一个聊天组件（最终在下面的App.tsx中）。我需要基本上公开使用的Chat实例，因为我想修改它。

BotChat.ts（完成）

export { App, AppProps } from './App';
export { Chat, ChatProps } from './Chat';
export * from 'botframework-directlinejs';
export { queryParams } from './Attachment';
export { SpeechOptions } from './SpeechOptions'
export { Speech } from './SpeechModule'
import { FormatOptions } from './Types';
// below are shims for compatibility with old browsers (IE 10 being the main culprit)
import 'core-js/modules/es6.string.starts-with';
import 'core-js/modules/es6.array.find';
import 'core-js/modules/es6.array.find-index';

在App.tsx中注意下面使用的聊天组件。这就是我需要通过网页公开的内容。有点困惑的是它是否导出了一个＆＃34;聊天＆＃34;键入而不是访问App.tsx中使用的聊天实例。希望这有一定道理：）

App.tsx（完整）

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Chat, ChatProps } from './Chat';
import * as konsole from './Konsole';

export type AppProps = ChatProps;

export const App = (props: AppProps, container: HTMLElement) => {
    konsole.log("BotChat.App props", props);
    ReactDOM.render(React.createElement(AppContainer, props), container);
}

const AppContainer = (props: AppProps) =>
    <div className="wc-app">
        <Chat { ...props } />  //<--------------This is what I want to get
                               //access to on the webpage, which currently
                               //only uses BotChat.App() to initialize the
                               //web chat control. Not sure how to expose
                               //this _instance_ to App.tsx and then expose 
                               //that instance to the webpage.
    </div>;

Answer 1

Web Chat有一个Redux存储和一个RxJS流，您可以公开它以与<Chat>组件进行交互。在React，你可以，但人们通常不会暴露任何功能。简短的理由：React组件的契约是道具，而不是函数。

对于可以访问聊天记录的RxJS流，您可以查看backchannel sample。但它是一个只读流。

对于其他互动，请查看Store.ts以查看其正在使用的操作。然后，在Chat.ts公开Redux商店（简单hack：通过window变量，更好：在<Chat>制作回调道具。）

如果您需要更多现有Redux操作中没有的交互，请随意添加更多内容。例如，这个pull request应该让您有一种注入聊天记录的感觉。

在网页上将React子组件公开给JavaScript

1 个答案: