React?中如何將CSS?visibility?屬性設置為?hidden

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

這篇文章主要介紹了React中如何將CSS?visibility屬性設置為?hidden,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

在 React 中將 CSS visibility 屬性設置為 hidden：

在指示元素是否應該可見的狀態(tài)中存儲一個布爾值。
有條件地在元素的樣式屬性中設置可見性屬性。
例如，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 布爾值，但這可以通過任何其他方式觸發(fā)。

注意 ，我們向 setIsVisible 傳遞了一個函數。這很重要，因為我們傳遞給 setIsVisible 的函數保證會使用 isVisible 布爾值的當前（最新）值來調用。

如果新狀態(tài)是使用先前狀態(tài)計算的，則可以將函數傳遞給 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 狀態(tài)變量存儲了一個真值，我們將 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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: