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

【问题标题】：Is there a way to refactor multiple inline CSS in a ternary operator using ReactJS?有没有办法使用 ReactJS 在三元运算符中重构多个内联 CSS？
【发布时间】：2020-09-27 21:43:09
【问题描述】：

这是位于 JSX 文件中的代码的 sn-p：

  <li onClick={handleClick} style={{ 
      textDecoration: isDone ? "line-through"  : "none", 
      background: isDone ? "#afc97e" : null, 
      color: isDone ? "#fff" : null }}
      >
  </li>

【问题讨论】：

您可以将其重构为单独的样式对象，然后只需执行style={isDone && styleObject}，或使用 CSS 并应用类名。

标签： javascript css reactjs jsx

【解决方案1】：

您应该使用 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> 
  )
};

【讨论】：

你能在你的代码上实现这个吗？这里的重要部分是声明一个常量对象并使用三元运算符对其进行解构。
您对此还有其他问题吗？很高兴为您提供帮助
（抱歉回复晚了）是的！它工作得很好。太感谢了。我按照你的建议工作。我将所有 CSS 属性放入一个 const 对象中，并编写了一个三元运算符，如下所示： style={isDone ? {...customStyle} : null}