“？”应该放在 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"
    }
  }
]

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

'?' Should be placed at the beginning of the line in ReactJS

javascript

reactjs

react-jsx

Rule Details