如何处理可见性：隐藏在 React 中

作者

如何处理可见性：隐藏在 React 中

How to handle visibility: hidden in React

要在 React 中将 CSS 可见性属性设置为隐藏：

  1. 在指示元素是否应该可见的状态中存储一个布尔值。
  2. 有条件visibility地在元素的styleprop 中设置属性。
  3. 例如，style={{visibility: isVisible ? 'visible' : 'hidden'}}。
应用程序.js
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>Some content here</h2>
      </div>

      <button onClick={handleClick}>Toggle visibility</button>
    </div>
  );
}

处理隐藏的可见性

我们使用useState
钩子来存储一个布尔值，指示元素是否应该可见。

每次单击按钮元素时，isVisible都会切换布尔值，但这可以通过任何其他方式触发。

请注意，我们将一个函数传递给setIsVisible. 这很重要，因为我们传递给的函数保证会用布尔setIsVisible值的当前（最新）值调用。 isVisible

如果新状态是
使用以前的状态计算的，则可以将函数传递给setState()。

元素的prop 的可见性
属性是使用
三元运算符有条件地设置的。stylediv

if/else三元运算符与语句非常相似。

如果问号左边的值为真，则运算符返回冒号左边的值，否则返回冒号右边的值。

应用程序.js
const result1 = 5 === 5 ? 'yes' : 'no';
console.log(result1); // 👉️ "yes"

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

如果isVisible状态变量存储真值，我们将visibility
属性设置为visible。否则，它被设置为hidden。

如果您依赖于为您的样式设置类名，也可以使用相同的方法。

应用程序.js
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>
  );
}

这是css定义visible和hidden类的。

应用程序.css
.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

上面的代码片段使用类而不是
styleprop 实现了相同的结果。

如果要为其设置类的元素也有不同的类，请使用模板字符串。

应用程序.js
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>
  );
}

美元符号花括号语法使我们能够直接在
模板字符串中计算表达式。

–

发表评论