React 中如何将CSS visibility 属性设置为 hidden
在 React 中将 CSS visibility 属性设置为 hidden:
- 在指示元素是否应该可见的状态中存储一个布尔值。
- 有条件地在元素的样式属性中设置可见性属性。
- 例如,
style={{visibility: isVisible ? “visible”:“hidden”}}
。
import {useState} from 'react'; export default function App() { const [isVisible, setIsVisible] = useState(true); const handleClick = event => { // 👇️ toggle visibility setIsVisible(current => !current); }; return ( <div> <div style={{visibility: isVisible ? 'visible' : 'hidden'}}> <h2>website: zadmei.com</h2> </div> <button onClick={handleClick}>Toggle visibility</button> </div> ); }
我们使用 useState
挂钩来存储一个布尔值,指示元素是否应该可见。
每次单击按钮元素时,都会切换 isVisible 布尔值,但这可以通过任何其他方式触发。
注意
,我们向setIsVisible
传递了一个函数。 这很重要,因为我们传递给setIsVisible
的函数保证会使用isVisible
布尔值的当前(最新)值来调用。
如果新状态是使用先前状态计算的,则可以将函数传递给 setState()
。
div 元素的 style 属性的可见性属性是使用三元运算符有条件地设置的。
三元运算符与 if/else
语句非常相似。
如果问号左边的值为真,则运算符返回冒号左边的值,否则返回冒号右边的值。
const result1 = 5 === 5 ? 'yes' : 'no'; console.log(result1); // 👉️ "yes" const result2 = 5 === 10 ? 'yes' : 'no'; console.log(result2); // 👉️ "no"
如果 isVisible
状态变量存储了一个真值,我们将 visibility
属性设置为 visible。 否则,它被设置为 hidden。
如果我们依赖为样式设置类名,也可以使用相同的方法。
import {useState} from 'react'; // 👇️ import css file import './App.css'; export default function App() { const [isVisible, setIsVisible] = useState(true); const handleClick = event => { // 👇️ toggle visibility setIsVisible(current => !current); }; return ( <div> <div className={isVisible ? 'visible' : 'hidden'}> <h2>Some content here</h2> </div> <button onClick={handleClick}>Toggle visibility</button> </div> ); }
下面是定义 visible 和 hidden 类的css。
.visible { visibility: visible; } .hidden { visibility: hidden; }
上面的代码片段使用类而不是 style 属性实现了相同的结果。
如果要设置类的元素也有不同的类,请使用模板字符串。
import {useState} from 'react'; // 👇️ import css file import './App.css'; export default function App() { const [isVisible, setIsVisible] = useState(true); const handleClick = event => { // 👇️ toggle visibility setIsVisible(current => !current); }; return ( <div> <div className={`my-class ${isVisible ? 'visible' : 'hidden'}`}> <h2>Some content here</h2> </div> <button onClick={handleClick}>Toggle visibility</button> </div> ); }
${}
语法使我们能够直接在模板字符串中计算表达式。
到此这篇关于React 中 如何处理 visibility: hidden的文章就介绍到这了,更多相关React 处理 visibility: hidden内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
react hooks页面实时刷新方式(setInterval)
这篇文章主要介绍了react hooks页面实时刷新方式(setInterval),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03React Hooks之useDeferredValue钩子用法示例详解
useDeferredValue钩子的主要目的是在React的并发模式中提供更流畅的用户体验,特别是在有高优先级和低优先级更新的情况下,本文主要讲解一些常见的使用场景及其示例2023-09-09
最新评论