如何从Angular应用向嵌入的React聊天组件传递Props？

完全可行，核心思路是通过全局变量或自定义事件在Angular和React之间建立数据传递通道——因为当前是通过script标签引入React构建产物，无法直接像React组件那样传递props。以下是具体实现步骤：

1. 改造React组件，支持外部传参 #

修改你的App.tsx，新增全局挂载方法并监听外部事件，用于接收Angular传来的参数：

// App.tsx
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';

// 定义组件Props类型
interface ChatBotProps {
  userName: string;
  initialMessage: string;
}

const ChatBot: React.FC<ChatBotProps> = (props) => {
  const [userName, setUserName] = useState(props.userName);
  const [initialMsg, setInitialMsg] = useState(props.initialMessage);

  // 监听自定义事件，接收Angular的动态参数更新
  useEffect(() => {
    const handlePropsUpdate = (event: CustomEvent) => {
      const { userName, initialMessage } = event.detail;
      setUserName(userName);
      setInitialMsg(initialMessage);
    };

    window.addEventListener('updateChatBotProps', handlePropsUpdate);

    // 读取全局变量作为初始参数（可选）
    if ((window as any).chatBotInitialProps) {
      const { userName, initialMessage } = (window as any).chatBotInitialProps;
      setUserName(userName);
      setInitialMsg(initialMessage);
    }

    return () => {
      window.removeEventListener('updateChatBotProps', handlePropsUpdate);
    };
  }, []);

  return (
    <div className="chat-bot">
      <h3>欢迎，{userName}！</h3>
      <div className="chat-message">{initialMsg}</div>
      {/* 你的聊天机器人核心逻辑 */}
    </div>
  );
};

// 暴露全局挂载方法，让Angular可以调用
(window as any).mountChatBot = (containerId: string, props?: ChatBotProps) => {
  const container = document.getElementById(containerId);
  if (!container) return;

  // 优先级：传入的props > 全局变量 > 默认值
  const finalProps = {
    userName: '匿名用户',
    initialMessage: '你好，我是聊天机器人',
    ...(window as any).chatBotInitialProps,
    ...props
  };

  ReactDOM.createRoot(container).render(<ChatBot {...finalProps} />);
};

同时调整webpack配置，确保构建产物能暴露全局方法：

// webpack.config.js
module.exports = {
  // 其他配置项...
  output: {
    filename: 'index.js',
    // 暴露到window对象
    library: 'ChatBot',
    libraryTarget: 'window'
  }
};

重新构建React组件，生成新的index.js和styles.css。

2. 在Angular中传递参数 #

方式一：初始加载时传递参数 #

在Angular的index.html中，引入React脚本前定义全局变量，作为组件初始props：

<!-- index.html -->
<script>
  // 定义React聊天机器人的初始参数
  window.chatBotInitialProps = {
    userName: '来自Angular的用户',
    initialMessage: '欢迎使用React聊天机器人！'
  };
</script>
<!-- 引入React构建产物 -->
<script src="/assets/react-chatbot/index.js"></script>
<link rel="stylesheet" href="/assets/react-chatbot/styles.css">

然后在Angular组件中调用全局挂载方法，渲染React组件：

// chat-bot-wrapper.component.ts
import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-chat-bot-wrapper',
  template: '<div id="react-chatbot-container"></div>'
})
export class ChatBotWrapperComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 调用React暴露的全局方法，挂载组件到指定容器
    (window as any).mountChatBot('react-chatbot-container');
  }
}

方式二：动态更新参数 #

如果需要在Angular数据变化时同步更新React组件，可以通过自定义事件传递新参数：

// chat-bot-wrapper.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chat-bot-wrapper',
  template: `
    <div id="react-chatbot-container"></div>
    <button (click)="updateChatBot()">更新用户信息</button>
  `
})
export class ChatBotWrapperComponent implements OnInit {
  currentUserName = '初始用户';

  ngOnInit(): void {
    // 初始挂载时直接传入props
    (window as any).mountChatBot('react-chatbot-container', {
      userName: this.currentUserName,
      initialMessage: '初始欢迎消息'
    });
  }

  updateChatBot(): void {
    this.currentUserName = `用户_${Date.now()}`;
    // 触发自定义事件，传递新的props
    window.dispatchEvent(new CustomEvent('updateChatBotProps', {
      detail: {
        userName: this.currentUserName,
        initialMessage: '更新后的欢迎消息'
      }
    }));
  }
}

注意事项 #

• 避免直接操作React组件内部DOM或状态，通过约定好的全局方法/事件传递数据，保持两个框架的独立性。
• TypeScript中访问window全局变量时，需要通过(window as any)类型断言，或者在src/typings.d.ts中扩展全局类型定义，避免类型报错。

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