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

有没有办法使用 ReactJS 在三元运算符中重构多个内联 CSS?

有没有办法使用 ReactJS 在三元运算符中重构多个内联 CSS?

12345678_0001 2022-09-23 14:56:13

下面是位于 JSX 文件中的代码片段:


  <li onClick={handleClick} style={{ 

      textDecoration: isDone ? "line-through"  : "none", 

      background: isDone ? "#afc97e" : null, 

      color: isDone ? "#fff" : null }}

      >

  </li> 


查看完整描述

1 回答

?
慕无忌1623718

TA贡献1424条经验 获得超3个赞

你应该用isDone样式声明一个常量,并使用传播运算符的帮助,我不知道你的组件是如何编写的,但这是一个非常通才的例子。希望它有所帮助。


const YourComponent = (props) => {

  const { isDone } = props;

  const isDoneStyles = {

    textDecoration: 'line-through',

    background: #afc97e,

    color: #fff

  };

  return(

    <li onClick={handleClick} style={{isDone ? ...isDoneStyles : ...{ textDecoration: none } }}>

    </li> 

  )

};


查看完整回答
反对 回复 3天前
  • 1 回答
  • 0 关注
  • 7 浏览
慕课专栏
更多

添加回答

举报

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