基于BotFramework WebChat示例16：React跨组件传递Webchat数据至Inspector.js

我明白你现在遇到的问题了——在React里直接用Node的模块变量传递方式去拿另一个组件的state肯定行不通，因为React组件的状态是实例级的私有数据，不是模块导出的全局变量。咱们得用React原生的组件通信方式来解决这个问题，最直接的就是状态提升（适合组件层级较浅的场景），如果后续组件层级变深，也可以用React Context来避免props层层传递。下面给你具体的解决方案：

方案一：状态提升（最适合当前场景） #

核心思路是把需要共享的状态从Webchat组件移到它们的父组件（也就是App.js）里，然后通过props把状态更新方法传给Webchat，把状态数据传给Inspector，这样就能实现数据的实时同步。

1. 重构App.js，托管共享状态

import React, { useState } from 'react';
import Webchat from './Webchat';
import Inspector from './Inspector';

function App() {
  // 把原来Webchat里的test状态移到父组件App中
  const [botData, setBotData] = useState('');

  // 定义一个更新数据的方法，传递给Webchat组件调用
  const updateBotData = (newData) => {
    setBotData(newData);
  };

  return (
    <div className="app-wrapper">
      {/* 把更新方法和当前数据传给Webchat */}
      <Webchat updateBotData={updateBotData} />
      {/* 把实时数据传给Inspector展示 */}
      <Inspector botData={botData} />
    </div>
  );
}

export default App;

2. 修改Webchat.js，通过props更新父组件状态

import React from 'react';
import ReactWebChat from 'botframework-webchat';

function Webchat({ updateBotData }) {
  // 假设你通过WebChat的onReceiveActivity回调接收Bot返回的消息
  const handleReceiveActivity = (activity) => {
    // 这里从Bot拿到你需要的数据，比如activity.text或者自定义字段
    const receivedData = activity.text;
    // 调用父组件传过来的方法更新共享状态
    updateBotData(receivedData);
  };

  return (
    <div className="webchat-container">
      <ReactWebChat
        directLine={/* 你的DirectLine配置，比如window.WebChat.createDirectLine({ token: 'xxx' }) */}
        onReceiveActivity={handleReceiveActivity}
        {/* 其他WebChat配置项 */}
      />
    </div>
  );
}

export default Webchat;

3. 修改Inspector.js，通过props接收并展示实时数据

import React from 'react';

function Inspector({ botData }) {
  return (
    <div className="inspector-panel">
      <h3>Bot数据Inspector</h3>
      {/* 直接渲染props里的botData，父组件状态更新时会自动重新渲染 */}
      <p>最新数据：{botData || '暂无Bot返回数据'}</p>
    </div>
  );
}

export default Inspector;

方案二：React Context（适合组件层级较深的场景） #

如果后续你的组件结构变得复杂，Webchat和Inspector不在同一层级，不想层层传递props，可以用React Context来实现全局状态共享：

1. 创建DataContext.js

import React, { createContext, useState, useContext } from 'react';

// 创建Context
const BotDataContext = createContext();

// 创建Provider组件，包裹需要共享状态的组件
export function BotDataProvider({ children }) {
  const [botData, setBotData] = useState('');

  const updateBotData = (newData) => {
    setBotData(newData);
  };

  return (
    <BotDataContext.Provider value={{ botData, updateBotData }}>
      {children}
    </BotDataContext.Provider>
  );
}

// 自定义Hook，简化Context的使用
export function useBotData() {
  return useContext(BotDataContext);
}

2. 修改App.js，用Provider包裹子组件

import { BotDataProvider } from './DataContext';
import Webchat from './Webchat';
import Inspector from './Inspector';

function App() {
  return (
    <BotDataProvider>
      <div className="app-wrapper">
        <Webchat />
        <Inspector />
      </div>
    </BotDataProvider>
  );
}

export default App;

3. 修改Webchat.js，使用自定义Hook更新状态

import React from 'react';
import ReactWebChat from 'botframework-webchat';
import { useBotData } from './DataContext';

function Webchat() {
  const { updateBotData } = useBotData();

  const handleReceiveActivity = (activity) => {
    updateBotData(activity.text);
  };

  return (
    <div className="webchat-container">
      <ReactWebChat
        directLine={/* 你的DirectLine配置 */}
        onReceiveActivity={handleReceiveActivity}
      />
    </div>
  );
}

export default Webchat;

4. 修改Inspector.js，使用自定义Hook获取状态

import React from 'react';
import { useBotData } from './DataContext';

function Inspector() {
  const { botData } = useBotData();

  return (
    <div className="inspector-panel">
      <h3>Bot数据Inspector</h3>
      <p>最新数据：{botData || '暂无Bot返回数据'}</p>
    </div>
  );
}

export default Inspector;

为什么之前的方法不行？ #

React组件的state是组件实例的私有数据，你通过require引入Webchat模块拿到的是组件的类/函数，不是组件的实例，自然拿不到实例内部的state。而Node的跨文件变量是模块级的全局变量，和React组件的状态更新机制完全不兼容——直接修改模块变量不会触发React的重新渲染，也就无法实现数据的实时更新。

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