如何在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。

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

Answer 2

我不确定您是否需要鼠标事件的当前状态，但无论是状态还是setter，您都可以使用上下文。

export const CanvasContext = createContext();
export default function App() {
const [mouseClicked, setMouseClicked] = useState(...);
const [mouseMoveState, setMouseMoveState] = useState(...);
const [mouseOut, setMouseOut] = useState(...);
return (
<CanvasContext.Provider value={{
mouseClicked,
setMouseClicked,
mouseMoveState,
setMouseMoveState,
mouseOut,
setMouseOut
}}>
<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.9} penumbra={1} />
<pointLight position={[-10, -10, -10]} />
<Suspense fallback={null}>
<Scene />
</Suspense>
</Canvas>
</CanvasContext.Provider>
);
}

然后使用内部Canvas/SkyBox/。。。你需要的状态/设置器是这样的。

export default function Canvas() {
const {setMouseClicked, setMouseMoveState} = useContext(CanvasContext);
return (
<div>
.....
</div>
);
}