如何为自定义React组件添加onClick等内置事件监听器？

先修正你代码里的两个问题 #

• LargerApp里的MyComponent多了一个冗余的))，需要删除
• MyComponent没有接收并传递onClick属性给内部的ThirdPartyComponent

方法1：直接传递onClick属性（优先尝试） #

多数第三方组件会将未声明的props转发给底层HTML元素，你可以直接把onClick从MyComponent传递给ThirdPartyComponent：

import { ThirdPartyComponent } from "ThirdPartyLibrary"

// 接收props并传递给第三方组件
function MyComponent({ onClick }) {
    return (
        <ThirdPartyComponent onClick={onClick} />
    )
}

export default function LargerApp() {
    return (
        <>
            Lorem Ipsum
            <MyComponent
                onClick={(e) => { alert('onClick event handled successfully') }}
            />
            More text on the page
        </>
    )
}

方法2：用容器元素包裹并绑定onClick #

如果第三方组件没有转发onClick，可以用<div>或<span>将其包裹，给容器添加onClick。注意：如果第三方组件内部调用了e.stopPropagation()，这个方法会失效：

import { ThirdPartyComponent } from "ThirdPartyLibrary"

function MyComponent({ onClick }) {
    return (
        <div onClick={onClick} style={{ display: 'inline-block' }}>
            <ThirdPartyComponent />
        </div>
    )
}

export default function LargerApp() {
    return (
        <>
            Lorem Ipsum
            <MyComponent
                onClick={(e) => { alert('onClick event handled successfully') }}
            />
            More text on the page
        </>
    )
}

方法3：通过Ref获取底层DOM元素绑定事件 #

如果前两种方法都不生效，用React的useRef获取第三方组件渲染出的底层DOM元素，手动绑定点击事件：

import { ThirdPartyComponent } from "ThirdPartyLibrary"
import { useRef, useEffect } from 'react'

function MyComponent({ onClick }) {
    const compRef = useRef(null)

    useEffect(() => {
        const element = compRef.current
        if (element && onClick) {
            element.addEventListener('click', onClick)
            // 组件卸载时移除事件监听，避免内存泄漏
            return () => element.removeEventListener('click', onClick)
        }
    }, [onClick])

    // 给第三方组件加ref，部分组件可能需要用forwardRef暴露底层元素
    return (
        <ThirdPartyComponent ref={compRef} />
    )
}

export default function LargerApp() {
    return (
        <>
            Lorem Ipsum
            <MyComponent
                onClick={(e) => { alert('onClick event handled successfully') }}
            />
            More text on the page
        </>
    )
}

补充：如果第三方组件是类组件且未使用forwardRef，无法直接通过ref获取底层DOM时，可以尝试用compRef.current.querySelector('目标选择器')定位具体元素后再绑定事件。

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