设置 CSS 显示：在 React 中有条件地无

作者

在 React 中有条件地设置 CSS display: none

Set CSS display: none conditionally in React

要none在 React 中有条件地将 CSS 显示属性设置为：

  1. 在指示是否应显示元素的状态中存储一个布尔值。
  2. 有条件display地在元素的styleprop 中设置属性。
  3. 例如，style={{display: isShown ? 'block' : 'none'}}。
应用程序.js
import {useState} from 'react';

export default function App() {
  const [isShown, setIsShown] = useState(true);

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

  return (
    <div>
      <button onClick={handleClick}>Toggle visibility</button>

      <div style={{display: isShown ? 'block' : 'none'}}>
        <h2>Some content here</h2>
      </div>
    </div>
  );
}

条件显示无

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

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

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

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

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

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

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

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

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

如果isShown状态变量存储真值，我们将display
属性设置为block。否则，它被设置为none。

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

应用程序.js
import {useState} from 'react';

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

export default function App() {
  const [isShown, setIsShown] = useState(true);

  const handleClick = event => {
    setIsShown(current => !current);
  };

  // 👇️ using classes
  return (
    <div>
      <button onClick={handleClick}>Toggle visibility</button>

      <div className={isShown ? 'display-block' : 'display-none'}>
        <h2>Some content here</h2>
      </div>
    </div>
  );
}

这是css定义display-block和display-none
类的。

应用程序.css
.display-block {
  display: block;
}

.display-none {
  display: none;
}

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

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

应用程序.js
import {useState} from 'react';
import './App.css';

export default function App() {
  const [isShown, setIsShown] = useState(true);

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

  return (
    <div>
      <button onClick={handleClick}>Toggle visibility</button>

      <div className={`my-class ${isShown ? 'display-block' : 'display-none'}`}>
        <h2>Some content here</h2>
      </div>
    </div>
  );
}

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

–

发表评论