下面是一个示例代码,展示了如何使用React Hook来处理鼠标点击时多个div的可见性:
import React, { useState } from 'react';
const App = () => {
const [isVisible, setIsVisible] = useState(false);
const handleClick = () => {
setIsVisible(!isVisible);
};
return (
{isVisible && Div 1}
{isVisible && Div 2}
{isVisible && Div 3}
);
};
export default App;
在上面的代码中,我们使用了useState
Hook来创建了一个isVisible
状态变量和一个setIsVisible
函数,用于控制多个div元素的可见性。初始时,isVisible
的值为false
,表示div元素是隐藏的。当点击按钮时,handleClick
函数会被调用,它会通过调用setIsVisible
来切换isVisible
的值,从而控制div元素的可见性。
在render方法中,我们展示了一个按钮,当点击按钮时,会切换多个div元素的可见性。每个div元素都使用了条件渲染,只有当isVisible
为true
时才会被渲染出来。
这样,当我们点击按钮时,多个div元素的可见性就会根据isVisible
的值进行切换。