使用React.createElement创建的按钮无onClick响应，求排查解决

我来帮你排查这个问题！你的代码逻辑本身是通顺的，但有几个常见的细节可能导致点击事件没触发，咱们一步步来解决：

1. 适配React 18+版本的渲染方式 #

如果你用的是React 18，旧的ReactDOM.render虽然能完成组件渲染，但在部分场景下可能会引发事件绑定异常。React 18官方推荐使用createRoot来初始化渲染：

修改后的完整代码：

const e = React.createElement;

function Button(props) {
  // 先加个日志确认props是否正确接收，方便排查
  console.log('Button组件收到的props:', props);
  return e('button', {onClick: props.handleClick}, props.name);
}

class LikeButton extends React.Component {
  handleClick = () => { 
    console.log('ciao'); 
  }

  render() {
    // 第三个参数null可以省略，因为Button没有子元素
    return e('div', null, e(Button, {handleClick: this.handleClick, name: 'Get'}));
  }
}

// React 18 标准渲染写法
const domContainer = document.querySelector('#getButton');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));

2. 确保HTML中正确引入React和ReactDOM脚本 #

如果页面没有正确引入React的UMD包，可能会出现组件能渲染但事件无法绑定的情况。在HTML的<body>末尾添加这两个开发版本的脚本（方便调试）：

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

3. 检查控制台日志过滤设置 #

如果控制台既没有报错也看不到ciao的输出，检查一下浏览器控制台的日志过滤规则，是不是不小心隐藏了普通日志。另外，Button组件里添加的console.log可以帮你确认handleClick函数是否真的传递到了按钮上。

按照上面的步骤调整后，点击按钮应该就能正常触发console.log('ciao')了！

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