使用BotFramework-WebChat的useScrollTo钩子报错：需为<Composer>后代组件

报错原因 #

useScrollTo 是BotFramework-WebChat的内部钩子，它依赖 <Composer> 组件提供的上下文环境才能正常工作。你的函数组件直接通过 ReactDOM.render 渲染，不在 <Composer> 的后代组件树中，因此无法获取所需的上下文，触发报错。

解决方案 #

将你的函数组件嵌套在 <Composer> 组件内部，确保它处于 <Composer> 的后代层级中。以下是两种常见的实现方式：

方式1：直接包裹组件 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Composer } from 'botframework-webchat';
import YourCustomComponent from './YourCustomComponent'; // 你的函数组件

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Composer>
      <YourCustomComponent />
    </Composer>
  </React.StrictMode>
);

方式2：结合WebChat组件使用 #

如果你的组件是WebChat界面的一部分，可将其与 <WebChat> 组件一同放在 <Composer> 内部：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Composer, WebChat } from 'botframework-webchat';
import YourCustomComponent from './YourCustomComponent';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Composer>
      <WebChat />
      <YourCustomComponent />
      {/* 也可通过WebChat的customComponents属性注入自定义组件 */}
    </Composer>
  </React.StrictMode>
);

完成上述调整后，useScrollTo 钩子就能正常访问到 <Composer> 提供的上下文，不再触发报错。

内容的提问来源于stack exchange，提问作者swarnava112