title: Exposing React child component to JavaScript on webpage
body: <p>I'm pretty new to rxjs, and trying to understand what's needed here to expose the Chat object in the Bot Framework, as I need to call some methods in it I'll add. I essentially need access to the created Chat component from the webpage, which right now has a BotChat.App. There's also a BotChat.Chat, but that doesn't seem to be the instance I need access to. </p>
  
  <p>The following is used from the Bot Framework by calling BotChat.App({params});
  That in turn creates a Chat component (eventually in App.tsx below). I need to basically expose the Chat instance that is used, as I want to modify it. </p>
  
  <p>BotChat.ts (Complete)</p>
  
  <pre><code>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';
  </code></pre>
  
  <p>And here in App.tsx note the Chat component used below. That is what I need to expose up through the webpage. A bit confused as to if it's exporting a "Chat" type as opposed to getting access to the instance of Chat being used in App.tsx. Hope this makes some sense :)</p>
  
  <p>App.tsx (Complete)</p>
  
  <pre><code>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) =&gt; {
      konsole.log("BotChat.App props", props);
      ReactDOM.render(React.createElement(AppContainer, props), container);
  }
  
  const AppContainer = (props: AppProps) =&gt;
      &lt;div className="wc-app"&gt;
          &lt;Chat { ...props } /&gt;  //&lt;--------------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.
      &lt;/div&gt;;
  </code></pre>