为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用 react 或 javascript 根据其内容向 span 标签添加不同的样式?

如何使用 react 或 javascript 根据其内容向 span 标签添加不同的样式?

MM们 2022-07-01 10:29:13
我有一个像下面这样的 span 元素,我想根据它的值更改 count_variable 颜色。render = () => {    const count_variable = this.get_count(); //this function returns an     //integer variable    return (        <div>            <span>counter</span>            <span>{count_variable}</span>        </div>    )}例如,输出如下所示,count 0现在当这个 count_variablevalue is 0 i want its color to be redvalue is 1 want its color to be bluevalue is greater than 1 its color to be green我该怎么做。有人可以帮我解决这个问题。谢谢。
查看完整描述

4 回答

?
FFIVE

TA贡献1797条经验 获得超6个赞

您可以在三元运算符的帮助下做到这一点


render = () => {

    const count_variable = this.get_count();

    return (

      <span>counter</span>

      <span style={{ color: count_variable === 0 ? 'red' : count_variable === 1 ? 'blue' : 'green' }}>

        {count_variable}

      </span >

 )    

}


查看完整回答
反对 回复 2022-07-01
?
精慕HU

TA贡献1845条经验 获得超8个赞

你可以这样做:


render = () => {

    const count_variable = this.get_count(); //this function returns an

    //integer variable


    let color = "";

    switch(count_variable) {

        case 0: color = "red"; break;

        case 1: color = "blue"; break;

        case 2: color = "green"; break;

        // Add more cases here for more colors

    }


    return (

        <div>

            <span>counter</span>

            <span style={{color: color}}>{count_variable}</span>

        </div>

    )

}

当您在一段时间后返回代码时,三元运算符可能会非常混乱,这就是我使用 switch 语句的原因。它将允许您稍后轻松添加更多案例,并在没有匹配项时提供默认案例。


查看完整回答
反对 回复 2022-07-01
?
森林海

TA贡献2011条经验 获得超2个赞

这应该对你有用,这是一个很好的阅读https://reactjs.org/docs/dom-elements.html


let divStyle = {

  color: 'blue'

};


render = () => {

    const count_variable = this.get_count(); //this function returns an 

    //integer variable

    if (count_variable===0)

        divStyle.color = 'red'

    else if (count_variable===1)

        divstyle.color = 'blue'

    else

        divstyle.color = 'green'

    return (

        <div>

            <span>counter</span>

            <span style={divStyle}>{count_variable}</span>

        </div>

    )

}


查看完整回答
反对 回复 2022-07-01
?
胡说叔叔

TA贡献1804条经验 获得超8个赞

render = () => {

  const count = this.get_count(); //this function returns an 

  return (

      <div>

          <span>counter</span>

          <span style={color: count === 0 ? 'red' : count === 1 ? 'blue' : 'green'}>{count}</span>

      </div>

    )

}


查看完整回答
反对 回复 2022-07-01
  • 4 回答
  • 0 关注
  • 287 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信