使用React createElement时，传入组件作为type无法传递事件处理函数

问题核心：内置HTML标签会自动处理onClick这类原生事件，但自定义组件不会自动将父组件传递的props转发给内部DOM元素，必须手动处理。

解决步骤 #

修改自定义组件InnerComponent，让它接收props并将onClick传递给内部的button元素：

import { createElement } from 'react'

const InnerComponent = (props) => {
  // 将接收的props完整传递给内部button，包括onClick
  return createElement(
    'button',
    props,
    'Click me (works now)'
  )
}

const Component = ({ children }) => {
  const handleClick = () => { console.log('onClick!') };

  let props = {
    onClick: handleClick,
  };
 
  return createElement(
    InnerComponent,
    props,
    children,
  )
}

export default Component

如果只需要传递onClick而非全部props，也可以解构指定：

const InnerComponent = ({ onClick }) => {
  return createElement(
    'button',
    { onClick },
    'Click me (works now)'
  )
}

这样点击按钮时，handleClick函数就能正常触发了。

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