React 中如何将CSS visibility 属性设置为 hidden

更新时间：2023年05月27日 08:55:54 作者：火焰兔

这篇文章主要介绍了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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

jQuery可见性过滤器：hidden和：visibility用法实例

react-redux及redux状态管理工具使用详解
Redux是为javascript应用程序提供一个状态管理工具集中的管理react中多个组件的状态redux是专门作状态管理的js库（不是react插件库可以用在其他js框架中例如vue，但是基本用在react中），这篇文章主要介绍了react-redux及redux状态管理工具使用详解,需要的朋友可以参考下
2023-01-01
react中常见hook的使用方式
这篇文章主要介绍了react中常见hook的使用方式与区别，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下
2021-04-04
React中编写CSS实例详解
这篇文章主要为大家介绍了React中编写CSS实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
如何解决React useEffect钩子带来的无限循环问题
本文主要介绍了解决React useEffect钩子带来的无限循环问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
React的生命周期详解
React是用于构建用户界面的JavaScript库。本文详细讲解了React的生命周期，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
深入理解React中Suspense与lazy的原理
在react中为我们提供了一个非常有用的组件,那就是Suspense,本文主要介绍了如何使用Suspense 和 react提供的lazy结合起来达到异步加载状态的目的,感兴趣的可以了解下
2024-04-04
React实现控制减少useContext导致非必要的渲染详解
这篇文章主要介绍了React如何有效减少使用useContext导致的不必要渲染,使用useContext在改变一个数据时，是通过自己逐级查找对比改变的数据然后渲染，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
React Grid Layout基础使用示例教程
React Grid Layout是一个用于在React应用程序中创建可拖拽和可调整大小的网格布局的库,通过使用React Grid Layout,我们可以轻松地创建自适应的网格布局,并实现拖拽和调整大小的功能,本文介绍了React Grid Layout的基础使用方法,感兴趣的朋友一起看看吧
2024-02-02
react MPA 多页配置详解
这篇文章主要介绍了react MPA 多页配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
react+ts实现简单jira项目的最佳实践记录
这篇文章主要介绍了react+ts实现简单jira项目，本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-07-07

React 中如何将CSS visibility 属性设置为 hidden

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具