意外的额外分号答案

【问题标题】：unexpected extra semi-colon意外的额外分号
【发布时间】：2021-10-06 23:15:58
【问题描述】：

我收到了这个 eslint 警告，但我不知道如何解决它。这是我的css

const StyledLabel = styled(P)`
  cursor: pointer;
  border: 1px solid transparent;
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: ${spacing.override(6)};
  ${({ theme, selected }) =>
    selected && `border: 1px solid ${theme.primary.black};`};

  &:hover {
    border: 1px solid ${theme.primary.black};
  }
`;

错误下划线显示在行显示块下方：inline-block

有什么想法吗？

【问题讨论】：

什么是waring？

标签： reactjs next.js eslint styled-components

【解决方案1】：

我没有使用 ESLint 的经验，但这是一个典型的工具将您指向错误行的典型案例。当一个工具给你一个表面上看起来非常错误的错误时，通常最好重新评估周围的代码并手动验证它是否正确。

在这种情况下，额外的分号实际上是在这条语句上：

${({ theme, selected }) =>
  selected && `border: 1px solid ${theme.primary.black};`};

当它在运行时被解释时，它会评估为：

border: 1px solid black;;

您可能已经将第二个分号放在那里作为结束 JavaScript 语句的反射，但此时它实际上是纯文本。出于某种原因，当您移动该行以获得答案时，您最终删除了多余的字符并且没有注意到它。

【讨论】：

【解决方案2】：

将动态 css 属性移到顶部会使错误消失。

const StyledLabel = styled(P)`
  ${({ theme, selected }) =>
    selected && `border: 1px solid ${theme.primary.black};`}
  cursor: pointer;
  border: 1px solid transparent;
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: ${spacing.override(6)};

  &:hover {
    border: 1px solid ${theme.primary.black};
  }
`;

【讨论】：

移动它不是解决办法。查看答案中 ${theme.primary.black};`} 的结尾与您发布的代码。那就是你额外的分号所在的位置。另外，请不要发布代码图像作为代码的唯一来源。此答案对使用屏幕阅读器的人没有帮助。