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

相关文章

  • react hooks页面实时刷新方式(setInterval)

    react hooks页面实时刷新方式(setInterval)

    这篇文章主要介绍了react hooks页面实时刷新方式(setInterval),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • react fiber使用的关键特性及执行阶段详解

    react fiber使用的关键特性及执行阶段详解

    这篇文章主要为大家介绍了react fiber使用的关键特性及执行阶段详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 使用react-dnd编写一个可拖拽排列的list

    使用react-dnd编写一个可拖拽排列的list

    这篇文章主要为大家详细介绍了如何使用react-dnd编写一个可拖拽排列的list,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • React Hooks之useDeferredValue钩子用法示例详解

    React Hooks之useDeferredValue钩子用法示例详解

    useDeferredValue钩子的主要目的是在React的并发模式中提供更流畅的用户体验,特别是在有高优先级和低优先级更新的情况下,本文主要讲解一些常见的使用场景及其示例
    2023-09-09
  • React跨路由组件动画实现

    React跨路由组件动画实现

    在 React 中路由之前的切换动画可以使用 react-transition-group 来实现,但对于不同路由上的组件如何做到动画过渡是个很大的难题,目前社区中也没有一个成熟的方案,本文给大家分享React跨路由组件动画实现,感兴趣的朋友一起看看吧
    2023-10-10
  • 在react配置使用less的完美方案

    在react配置使用less的完美方案

    由于 create-react-app 使用 webpack 作为其模块打包器,你需要修改 webpack 的配置来支持 .less 文件,这篇文章主要介绍了在react配置使用less的完美方案,需要的朋友可以参考下
    2024-04-04
  • 取消正在运行的Promise技巧详解

    取消正在运行的Promise技巧详解

    这篇文章主要为大家介绍了取消正在运行的Promise技巧详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 记一次react前端项目打包优化的方法

    记一次react前端项目打包优化的方法

    这篇文章主要介绍了记一次react前端项目打包优化的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 浅谈react.js中实现tab吸顶效果的问题

    浅谈react.js中实现tab吸顶效果的问题

    下面小编就为大家带来一篇浅谈react.js中实现tab吸顶效果的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 基于webpack4.X从零搭建React脚手架的方法步骤

    基于webpack4.X从零搭建React脚手架的方法步骤

    这篇文章主要介绍了基于webpack4.X从零搭建React脚手架的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论