在 React 中有条件地设置样式

React 4月前 37

在 React 中有条件地设置样式：

在元素上设置 style 属性。
使用三元运算符有条件地设置 CSS 属性的值。
例如，backgroundColor: count > 0 ? 'lime' : 'salmon'。

import './App.css';
import {useState} from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(current => current + 1);
  };

  return (
    <div>
      <div
        style={{
          backgroundColor: count > 0 ? 'lime' : 'salmon',
          color: count > 2 ? 'white' : null,
        }}
      >
        Count: {count}
      </div>

      <br />

      <div
        className={`${count > 0 ? 'bg-lime' : 'bg-salmon'} ${
          count > 2 ? 'text-white' : null
        }`}
      >
        Count: {count}
      </div>

      <br />

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

export default App;

下面是示例的css文件。

.bg-salmon {
  background-color: salmon;
}

.bg-lime {
  background-color: lime;
}

.text-white {
  color: white;
}

在 React 中有条件地设置样式

我们使用三元运算符有条件地设置元素的样式或类名。

<div
  style={{
    backgroundColor: count > 0 ? 'lime' : 'salmon',
    color: count > 2 ? 'white' : null,
  }}
>
  Count: {count}
</div>

<div
  className={`${count > 0 ? 'bg-lime' : 'bg-salmon'} ${
    count > 2 ? 'text-white' : null
  }`}
>
  Count: {count}
</div>

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

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

换句话说，如果 count 变量存储的值大于 0，我们将 backgroundColor CSS 属性设置为 lime，否则我们将其设置为 salmon。

如果我们必须在样式中插入变量，请使用模板文字。

import {useState} from 'react';

const App = () => {
  const width = 300;
  const height = 150;

  return (
    <div>
      <div
        style={{
          width: `${width}px`,
          height: `${height}px`,
          backgroundColor: 'hi'.length === 2 ? 'lime' : 'salmon',
        }}
      >
        Hello world
      </div>
    </div>
  );
};

export default App;

注意 ，字符串用反引号 “ 括起来，而不是用单引号括起来。

美元符号和花括号语法允许我们使用被评估的占位符。

import './App.css';
import {useState} from 'react';

const App = () => {
  const myClass = 'bg-salmon';

  return (
    <div>
      <div className={`text-white ${myClass}`}>Some content here</div>

      <div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
        Some content here
      </div>
    </div>
  );
};

export default App;