如何向嵌入非React网页的React组件传递回调以响应按钮点击

你提出的「向React组件传入按钮点击回调、由网页侧自行处理后续逻辑」的方案完全可行，也是这类“在非React页面嵌入独立React组件”场景下最符合React设计范式的实现思路，不存在逻辑问题。

首先需要先修正你现有代码的两个基础问题：

1. 当前代码使用了ES模块import语法，但页面是通过babel-standalone直接在浏览器运行JSX，没有配置模块解析规则，原生浏览器环境无法识别这类import语句，会直接报加载错误
2. 当前的组件渲染逻辑没有预留回调的传参通道，组件和外部网页没有建立通信链路

调整步骤如下：

1. 改造App组件，支持接收外部回调 #

把回调作为组件的props入参接收，按钮点击时优先判断回调存在，再执行调用：

// App 组件核心逻辑
class App extends React.Component {
  handleButtonClick = () => {
    // 增加容错判断，避免外部未传回调时报错
    if (typeof this.props.onButtonClick === 'function') {
      // 直接调用网页侧传入的回调，网页侧自行决定执行什么逻辑
      this.props.onButtonClick();
    }
  }
  render() {
    return <button onClick={this.handleButtonClick}>Click here</button>
  }
}

2. 网页侧提前定义图片修改逻辑 #

在原生HTML的脚本中，把需要执行的图片修改逻辑暴露到全局可访问的位置（比如挂在window对象上），保证React组件渲染时能读取到：

<script>
  // 网页侧自定义的回调逻辑，挂在全局对象上
  window.__changeImageCallback = function() {
    const targetImg = document.querySelector('img');
    // 实现图片切换的具体逻辑
    targetImg.src = targetImg.src === 'someURL' 
      ? '新的图片地址' 
      : 'someURL';
  }
</script>

3. 渲染组件时把回调传入props #

修改组件的渲染逻辑，把全局的回调函数从window上取下来，作为props传给App组件：

// 组件渲染逻辑（和上面的App组件写在同一个jsx文件中，去掉多余的import语句）
ReactDOM.render(
  <App onButtonClick={window.__changeImageCallback} />,
  document.getElementById('app')
)

如果你希望React组件和外部网页的解耦度更高（比如组件要复用、不想绑定固定的全局回调位置），完全可以通过「组件抛出自定义事件、网页侧捕获事件」的方式实现通信。
实现逻辑如下：

1. 在组件的按钮点击事件中，向组件的挂载节点派发原生DOM自定义事件，可以在事件中携带需要传递给网页侧的参数：

   handleButtonClick = () => {
     const customEvent = new CustomEvent('react-btn-click', {
       detail: { clickTime: Date.now() } // 自定义可传递的参数
     })
     document.getElementById('app').dispatchEvent(customEvent)
   }
   

2. 网页侧通过原生事件监听捕获组件抛出的事件，自行处理后续逻辑：

   // 网页侧监听组件抛出的自定义事件
   document.getElementById('app').addEventListener('react-btn-click', (e) => {
     // 拿到事件携带的参数，执行图片修改逻辑
     console.log('捕获到React按钮点击事件，触发时间：', e.detail.clickTime)
     document.querySelector('img').src = '新的图片地址'
   })
   

• 回调props方案：调用链路直接，逻辑简单直观，适合组件和网页紧耦合的场景；缺点是需要和网页侧约定好全局回调的存储位置，灵活性稍差
• 自定义事件方案：组件和网页完全解耦，组件只需要负责抛出事件，不需要关心外部有哪些逻辑在监听；适合组件需要在多个页面复用的场景

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