迹忆客 专注技术分享

在 React 中使用内联样式设置背景颜色：

1. 在元素上设置样式 style 属性。
2. 将 backgroundColor 属性设置为特定颜色。

import {useState} from 'react';

export default function App() {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    // 👇️ toggle
    setIsActive(current => !current);

    // 👇️ or set to true
    // setIsActive(true);
  };

  const bgColor = 'salmon';

  return (
    <div>
      {/* ✅ set background color */}
      <div style={{backgroundColor: 'lime', color: 'white'}}>Avocado</div>

      <br />

      {/* ✅ set background color using a variable */}
      <div style={{backgroundColor: bgColor, color: 'white'}}>Apple</div>

      <br />

      {/* ✅ set background color on click */}
      <div
        style={{
          backgroundColor: isActive ? 'violet' : '',
          color: isActive ? 'white' : '',
        }}
        onClick={handleClick}
      >
        Hello world
      </div>
    </div>
  );
}

我们使用样式对象的 backgroundColor 属性来设置元素的背景颜色。

请注意 ，在样式对象上访问时，像背景颜色这样的多词属性是驼峰式的。

样式属性的值包含在 2 组花括号中。

<div style={{backgroundColor: 'lime', color: 'white'}}>Avocado</div>

内联样式中的第一组花括号标记表达式的开始，第二组花括号是包含样式和值的对象。

如果我们需要在点击时设置元素的背景颜色，请使用状态变量来跟踪点击状态。

import {useState} from 'react';

export default function App() {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    // 👇️ toggle
    setIsActive(current => !current);

    // 👇️ or set to true
    // setIsActive(true);
  };

  return (
    <div>
      {/* set background color on click */}
      <div
        style={{
          backgroundColor: isActive ? 'violet' : '',
          color: isActive ? 'white' : '',
        }}
        onClick={handleClick}
      >
        Hello world
      </div>
    </div>
  );
}

我们在元素上设置了 onClick 属性，所以每次点击它时，都会调用 handleClick 函数。

在我们的 handleClick 函数中，我们只需切换 isActive 状态。

我们可以将状态设置为活动状态，例如 setIsActive(true)，如果你不想每次点击元素时改变背景颜色。

我们使用三元运算符有条件地在元素上设置 backgroundColor 样式。

<div
  style={{
    backgroundColor: isActive ? 'violet' : '',
    color: isActive ? 'white' : '',
  }}
  onClick={handleClick}
>
  Hello world
</div>

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

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

换句话说，如果 isActive 变量存储真值，我们将 backgroundColor 属性设置为紫罗兰色，否则将其设置为空字符串。