how to handle visibility: hidden in react-ag捕鱼王app官网

current location：home > learning > web front-end > react >

vue react javascript angular css html

how to handle visibility: hidden in react

author：jiyik last updated：2025/03/09 views：

in react, set the css visibility property to hidden:

stores a boolean value in the state indicating whether the element should be visible.
conditionally set the visibility property in the element's style attributes.
for example, style={{visibility: isvisible ? “visible”：“hidden”}}.

import {usestate} from 'react';

export default functionapp() {
  const [isvisible, setisvisible] = usestate(true);

  const handleclick = event => {
    // 👇️ toggle visibility
    setisvisible(current => !current);
  };

  return (
    <div><divstyle={{visibility:isvisible ? 'visible' : 'hidden'}}><h2>website: jiyik.comh2>div><buttononclick={handleclick}>toggle visibilitybutton>div>
  );
}

how to handle visibility hidden in react

we use usestatethe hook to store a boolean value indicating whether the element should be visible.

every time the button element is clicked, the isvisible boolean is toggled, but this could be triggered by any other means.

注意, we setisvisiblepass a function to . this is important because setisvisiblethe function we pass to is guaranteed to isvisiblebe called with the current (latest) value of the boolean.

if the new state is calculated using the previous state, a function can be passed to setstate().

the visibility property of the style attribute of the div element is conditionally set using the ternary operator.

the ternary operator is if/elsevery similar to the statement.

if the value to the left of the question mark is true, the operator returns the value to the left of the colon, otherwise it returns the value to the right of the colon.

const result1 = 5 === 5 ? 'yes' : 'no';
console.log(result1); // 👉️ "yes"

const result2 = 5 === 10 ? 'yes' : 'no';
console.log(result2); // 👉️ "no"

if isvisiblethe state variable stores a true value, we visibilityset the property to visible . otherwise, it is set to hidden .

the same approach can be used if we rely on setting class names for styles.

import {usestate} from 'react';

// 👇️ import css file
import './app.css';

export default functionapp() {
  const [isvisible, setisvisible] = usestate(true);

  const handleclick = event => {
    // 👇️ toggle visibility
    setisvisible(current => !current);
  };

  return (
    <div><divclassname={isvisible ? 'visible' : 'hidden'}><h2>some content hereh2>div><buttononclick={handleclick}>toggle visibilitybutton>div>
  );
}

below is the css that defines the visible and hidden classes.

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

the code snippet above achieves the same result using a class instead of the style attribute.

if the element you want to set the class on also has a different class, use template strings.

import {usestate} from 'react';

// 👇️ import css file
import './app.css';

export default functionapp() {
  const [isvisible, setisvisible] = usestate(true);

  const handleclick = event => {
    // 👇️ toggle visibility
    setisvisible(current => !current);
  };

  return (
    <div><divclassname={`my-class ${isvisible ? 'visible' : 'hidden'}`}><h2>some content hereh2>div><buttononclick={handleclick}>toggle visibilitybutton>div>
  );
}

${}the syntax enables us to evaluate expressions directly in template strings.

previous：update state when props change in react

next: none

for reprinting, please send an email to 1244347461@qq.com for approval. after obtaining the author's consent, kindly include the source as a link.

article url：

update state when props change in react

publish date：2025/03/09 views：157 category：react

要在 react 中的 props 更改时更新状态：将 props 作为依赖项传递给 useeffect 钩子。每次 props 改变时，useeffect 中的逻辑都会重新运行。

publish date：2025/03/09 views：70 category：react

在 react 中更新对象状态数组：使用 map() 方法遍历数组。在每次迭代中，检查是否满足某个条件。更新符合条件的对象的属性。

publish date：2025/03/09 views：146 category：react

要解决 react 中的“uncaught referenceerror: process is not defined”，需要在项目的根目录中打开终端并通过运行 npm install react-scripts@latest 更新 react-scripts 包的版本，并在必要时重新安装依赖项

publish date：2025/03/09 views：81 category：react

在 react 中有条件地将 css `display` 属性设置为 none：在指示是否应显示元素的状态中存储一个布尔值。有条件地在元素的 `style` 属性中设置 display 属性。例如，style={{display: isshown ? 'block'

publish date：2025/03/09 views：184 category：react

在 react 中使用模板文字进行字符串插值，例如 div classname={text-white ${myclass}} 。模板文字用反引号分隔，并允许我们使用美元符号和大括号 ${expression} 语法嵌入变量和表达式。 import ./

publish date：2025/03/09 views：106 category：react

在 react 中使用方括号获取数组的第一个元素，例如 const first = arr[0]; . 索引为 0 的数组元素是数组中的第一个元素。如果数组为空，则返回 undefined 值。 import {usestate} from react ; const ap

publish date：2025/03/08 views：88 category：react

在 react 中获取鼠标位置：在元素上设置 `onmousemove` 属性或在窗口对象上添加事件侦听器。提供事件处理函数。访问事件对象的相关属性。

publish date：2025/03/08 views：58 category：react

要在 react.js 中创建一个只包含数字的输入字段：将输入字段的类型设置为 text 。添加删除所有非数字值的 onchange 事件处理程序。将输入值保存在状态变量中。 import {usestate} from reac

publish date：2025/03/08 views：175 category：react

在 react 中使用 string() 函数在 jsx 中呈现布尔值，例如 h2{字符串(bool1)}/h2 。默认情况下，布尔值不会在 react 中呈现任何内容，因此我们必须将值转换为字符串才能呈现它。 export defaul

how to handle visibility: hidden in react-ag捕鱼王app官网