下面是一个示例代码,展示了如何使用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的值进行切换。