javascript - “？”应该放在 ReactJS 中行的开头

Question

我正在处理一个 ReactJS 项目，但出现以下错误:

? should be placed at the beginning of the line operator-linebreak

这是片段:

{
  index === 0 ?
    <div className='grid__row--offset--40 row'>
      <div className='small-40 columns small-centered'>
        <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
        <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x' /></a>
      </div>
    </div>
    : null
}

Answer 1

这是 ESLint's operator-linebreak 的一部分样式规则:

Rule Details

This rule enforces a consistent linebreak style for operators.

默认情况下，规则设置为允许运算符在表达式之后 使用 ? 和 时除外::

The default configuration is "after", { "overrides": { "?": "before", ":": "before" } }

因此，按照规则将 ? 放在 JSX 之前的换行符上:

{
  index === 0
    ? <div>
        {/* Your JSX here */}
      <div>
    : null
}

如果您不喜欢这个，您可以在您的 .eslintrc 或其他配置文件中重新配置它。对于您要执行的操作，请尝试以下配置:

"operator-linebreak": [
  "error",
  "after",
  {
    "overrides": {
      ":": "before"
    }
  }
]