迹忆客 专注技术分享

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

1. 在元素上设置 style 属性。
2. 使用三元运算符有条件地设置 CSS 属性的值。
3. 例如，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;
}

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

<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;

我们将模板文字包裹在其中的花括号标记了必须计算的表达式的开头。

打开右花括号之间的代码只是 JavaScript，因此我们在模板文字中使用的任何变量或表达式都将被评估。