javascript - 如何在 ReactJS 中的重叠组件之间传递鼠标事件

Question

我正在构建一个包含两个重叠组件的页面，我想将鼠标事件从顶部组件传递到底部组件。

我正在使用 ReactJs，代码如下所示：

export default function App() {
  return (
    <>
    
    <SkyBox className='Streetview' onClick={()=>console.log("you clicked STREETVIEW!")}/>
    
    <Canvas className='Canvas' onClick={()=> console.log("you clicked THREEJS")}>
       <Camera position={[0, 0, -20]} />
     <ambientLight intensity={0.7} />
     
      <spotLight position={[10, 10, 10]} angle={0.90} penumbra={1} />
      <pointLight position={[-10, -10, -10]} />
      
      <Suspense fallback={null}>
        <Scene />
      </Suspense>
    
      </Canvas>

    </>
  );
} 

所以我想从 Canvas 组件中获取鼠标事件并将它们传递给街景 SkyBox 之一，以便用户可以浏览街景全景图，因此我感兴趣的事件是 mouseClick、mouseMove 和 mouseOut。

标签： javascriptreactjsreact-hooks

Answer 1

您可以像这样将事件作为道具传递：

import { useState } from 'react'

const Wrapper = () => {
  const [event, setEvent] = useState(null)

  return (
    <div onClick={(e) => setEvent(e)}>
      Lorem Ipsum
      <Component event={event} />
    </div>
  )
}

const Component = (event) => {
  console.log(event) // → event: SyntheticBaseEvent
  return null
}

export default Wrapper