React自定义组件如何向上触发onClick事件并获取传入的children内容

首先原示例代码里存在一处语法疏漏：useState的变量声明前漏了const，运行会直接报错，修正时会一并补上。两个需求的实现逻辑非常简单：

• 自定义组件不会自动把父组件传入的onClick等属性绑定到内部DOM，需要手动接收属性后绑定到真实的原生按钮元素上
• 自定义组件标签之间嵌套的文本/节点，React会自动存入children属性传递给子组件，直接读取即可替换写死的默认文本

修正后的完整可运行代码如下：

import { useState } from 'react';

export default function Home() {
  // 补全原代码缺失的const声明
  const [timesClicked, setTimesClicked] = useState(0)

  return (
      <div className="home">
          <h1>Click the button!</h1>
          <div>The CoolButton has been clicked {timesClicked} times!</div>
          <CoolButton onClick={() => setTimesClicked(timesClicked + 1)}>Press Me</CoolButton>    
      </div>
  ); 
}

// 解构接收需要的两个props：点击回调、子内容，同时给子内容加默认值
export default function CoolButton({ onClick, children = "I'm button" }) {
  return (
      <div className="cool_button">
        {/* 把点击回调绑定到原生button元素，文本渲染传入的children */}
        <button onClick={onClick}>{children}</button>
      </div>
  ); 
}

补充说明 #

• 上述写法默认把点击事件绑定在原生<button>元素上，会自动获得原生按钮的键盘可访问性、默认交互语义，是推荐的实现方式。如果你需要外层包裹的div.cool_button也响应点击，把onClick同时绑定到div上即可。
• 后续如果需要给CoolButton扩展禁用状态、自定义样式、按钮类型等能力，都可以通过props接收参数后透传给内部的原生button，不需要改动组件的基本结构。

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