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

Question

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

  <li onClick={handleClick} style={{ 

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

      background: isDone ? "#afc97e" : null, 

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

      >

  </li> 

Answer 1

你应该用isDone样式声明一个常量，并使用传播运算符的帮助，我不知道你的组件是如何编写的，但这是一个非常通才的例子。希望它有所帮助。const YourComponent = (props) => {&nbsp; const { isDone } = props;&nbsp; const isDoneStyles = {&nbsp; &nbsp; textDecoration: 'line-through',&nbsp; &nbsp; background: #afc97e,&nbsp; &nbsp; color: #fff&nbsp; };&nbsp; return(&nbsp; &nbsp; <li onClick={handleClick} style={{isDone ? ...isDoneStyles : ...{ textDecoration: none } }}>&nbsp; &nbsp; </li>&nbsp;&nbsp; )};