conditionally setting styles in react-ag捕鱼王app官网

current location：home > learning > web front-end > react >

vue react javascript css

conditionally setting styles in react

author：jiyik last updated：2025/03/11 views：

conditionally setting styles in react:

sets the attribute on the element style.
use the ternary operator to conditionally set the value of a css property.
for example, 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><divstyle={{backgroundcolor:count > 0 ? 'lime' : 'salmon',
          color: count > 2 ? 'white' : null,
        }}
      >
        count: {count}
      div><br /><divclassname={`${count > 0 ? 'bg-lime' : 'bg-salmon'} ${
          count > 2 ? 'text-white' : null
        }`}
      >
        count: {count}
      div><br /><buttononclick={handleclick}>clickbutton>div>
  );
};

export default app;

below is the example css file.

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

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

.text-white {
  color: white;
}

we use the ternary operator to conditionally set the style or class name of an element.


  style={{
    backgroundcolor: count > 0 ? 'lime' : 'salmon',
    color: count > 2 ? 'white' : null,
  }}
>
  count: {count}
</div>
<divclassname={`${count > 0 ? 'bg-lime' : 'bg-salmon'} ${
    count > 2 ? 'text-white' : null
  }`}
>
  count: {count}
div>

the ternary operator is very similar to if/elsethe statement.

it checks if the value to the left of the question mark is true, if so then the operator returns the value to the left of the colon, otherwise it returns the value to the right.

in other words, if countthe value stored in the variable is greater than 0, we set the backgroundcolor css property to lime, otherwise we set it to salmon.

if we have to insert variables in styles, use template literals.

import {usestate} from 'react';

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

  return (
    <div><divstyle={{width: `${width}px`,
          height: `${height}px`,
          backgroundcolor: 'hi'.length === 2 ? 'lime' : 'salmon',
        }}
      >
        hello world
      div>div>
  );
};

export default app;

注意, strings are enclosed in backticks `` instead of single quotes.

the dollar sign and curly brace syntax allows us to use placeholders that are evaluated.

import './app.css';
import {usestate} from 'react';

const app = () => {
  const myclass = 'bg-salmon';

  return (
    <div><divclassname={`text-white ${myclass}`}>some content herediv><divclassname={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
        some content here
      div>div>
  );
};

export default app;

the curly braces that we wrap the template literal in mark the beginning of the expression that must be evaluated.

the code between the opening and closing curly braces is just javascript, so any variables or expressions we use in the template literal will be evaluated.

next: none

for reprinting, please send an email to 1244347461@qq.com for approval. after obtaining the author's consent, kindly include the source as a link.

article url：

publish date：2025/03/11 views：174 category：react

在 react 中获取元素的高度：在元素上设置 ref 属性。在 uselayouteffect 钩子中，更新高度的状态变量。使用 clientheight 属性获取元素的高度。

publish date：2025/03/11 views：169 category：react

大多数开发人员都非常熟悉 react hooks 的工作方式和常见用例，但是有一个 useeffect 问题很多人可能不太清楚。

publish date：2025/03/11 views：104 category：react

react lazy 函数允许我们动态导入组件。我们可能希望这样做以减少用户必须下载才能在屏幕上看到内容的初始捆绑包大小。

how to loop over objects in react

publish date：2025/03/11 views：50 category：react

在 react 中循环一个对象：使用 object.keys() 方法获取对象键的数组。使用 map() 方法遍历键数组。

conditionally setting styles in react-ag捕鱼王app官网