React聊天机器人点击内部选项时如何在外部渲染指定组件？

核心逻辑是状态提升，将组件渲染的控制权放到聊天机器人和目标渲染区域的公共父级，通过状态驱动外部区域渲染。

具体实现步骤 #

• 步骤1：在公共父组件定义控制状态和回调方法
  你可以在同时包裹聊天机器人和外部渲染区的父组件中添加控制状态，示例代码如下：

import { Component } from 'react';
import ChatBot from './ChatBot'; // 替换为你的聊天机器人组件路径
import Calculators from './Calculators';

class PageContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 控制Calculators是否展示
      showCalculators: false,
      // 存储Calculators需要的入参
      calculatorsParams: {}
    }
  }

  // 暴露给聊天机器人的回调，触发外部渲染
  openCalculators = (params) => {
    this.setState({
      showCalculators: true,
      calculatorsParams: params
    })
  }

  // 可选：关闭组件的方法
  closeCalculators = () => {
    this.setState({
      showCalculators: false,
      calculatorsParams: {}
    })
  }

  render() {
    const { showCalculators, calculatorsParams } = this.state;
    return (
      <div className="page-wrapper">
        {/* 聊天机器人区域，传入回调方法 */}
        <div className="chatbot-wrap">
          <ChatBot onOpenCalculators={this.openCalculators} />
        </div>
        {/* 聊天机器人外的目标渲染区域 */}
        <div className="outside-render-wrap">
          {showCalculators && <Calculators {...calculatorsParams} />}
        </div>
      </div>
    )
  }
}

• 步骤2：修改聊天机器人配置和触发逻辑
  删掉原配置中component: <Calculators/>的配置项，改为在触发summary-ends-last动作时调用父组件传入的回调，把Calculators需要的steps等参数传递过去：

// 聊天机器人内部处理触发事件的逻辑位置
if (currentTrigger === 'summary-ends-last') {
  // 拿到需要传给Calculators的参数
  const { steps } = this.props;
  // 调用父组件传入的回调
  this.props.onOpenCalculators({ steps });
}

• 步骤3：适配Calculators组件入参
  你现有Calculators组件接收steps的逻辑不需要修改，直接可以正常使用父组件传递的参数即可。如果需要加关闭按钮，将closeCalculators方法通过props传入组件调用即可。

可选优化方案 #

如果你的项目组件层级很深，逐层传递回调比较麻烦，可以用React Context或者Redux这类全局状态管理方案实现：将控制showCalculators的状态和修改方法存在全局store中，聊天机器人触发action修改状态，外部渲染区域订阅状态即可完成渲染，不需要逐层传递props。

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