javascript - 如何向子组件添加事件？

Question

我希望网站上的某些元素在单击时发出声音。我通过添加带有 ref 的 audio 元素以及播放 ref 声音 onClick 的函数轻松做到了这一点>.

const sound = require('../sounds/bird.mp3');
const soundRef = useRef(null);
const playSound = () => {
    soundRef.current.play();
}

return <div>
    <audio ref={soundRef}><source src={sound} /></audio>
    <img src="bird.png" onClick={playSound} />
</div>

由于我现在发现我可能需要重用它，因此我决定创建一个 Audio 组件来封装单击的元素。我希望它接收声音的文件名作为属性:

<Audio soundName="bird">
    <div><img src="bird.png" /></div>
</Audio>

我的问题是:在 Audio 组件中，我获取 soundName 和 children 属性并渲染 {children code>，但是如何将 onClick 添加到子元素，以便触发 Audio 元素 playSound 函数？

我目前在 Audio 组件中拥有的内容:

export default ({soundName, ...children}) => {
    const sound = require(`../sounds/${soundName}.mp3`);
    const soundRef = useRef(null);
    const playSound = () => {
        soundRef.current.play();
    }

    return <>
        <audio ref={soundRef}><source src={sound} /></audio>
        {children}    // <--- this is where I need to somehow add the event
    </>
}

我希望我在这里错过了一件小事......

Answer 1

您可以用诸如 div 之类的东西包裹您的 children，它可以监听您的事件，例如:

export default ({soundName, ...children}) => {
    const sound = require(`../sounds/${soundName}.mp3`);
    const soundRef = useRef(null);
    const playSound = () => {
        soundRef.current.play();
    }

    return <>
        <audio ref={soundRef}><source src={sound} /></audio>
        <div onClick={ playSound }>
            {children}    // <--- this is where I need to somehow add the event
        </div>
    </>
}

我认为这涵盖了您的大部分情况。

可能有一个子组件在 Audio 组件之前拦截事件并阻止事件传播到父组件，例如:

<Audio soundName="bird">
    <img
        src="bird.png"
        onClick={ event => {
            doSomethingOnThisImageClick()
            event.stopPropagation()
        }}
    />
</Audio>

如果您知道可能会发生这种情况，但无论如何仍想播放该文件，则需要在子组件知道之前，使用 Capture 事件名称的变体，例如:

export default ({soundName, ...children}) => {
    const sound = require(`../sounds/${soundName}.mp3`);
    const soundRef = useRef(null);
    const playSound = () => {
        soundRef.current.play();
    }

    return <>
        <audio ref={soundRef}><source src={sound} /></audio>

        { /*      notice here?     */ }
        { /*           |           */ }
        { /*           v           */ }
        <div onClickCapture={ playSound }>
            {children}
        </div>
    </>
}