React 中 如何处理 visibility: hidden

在 React 中将 CSS visibility 属性设置为 hidden:

  1. 在指示元素是否应该可见的状态中存储一个布尔值。
  2. 有条件地在元素的样式属性中设置可见性属性。
  3. 例如,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 布尔值,但这可以通过任何其他方式触发。

如果新状态是使用先前状态计算的,则可以将函数传递给 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>
  );
}

${} 语法使我们能够直接在模板字符串中计算表达式。