ESLint：箭头主体周围的意外块语句。（箭体式）答案

【问题标题】：ESLint: Unexpected block statement surrounding arrow body. (arrow-body-style)ESLint：箭头主体周围的意外块语句。（箭体式）
【发布时间】：2018-10-09 17:45:31
【问题描述】：

这个由下面的 sn-p 代码触发的规则最令人困惑（对我来说 - 以及它出现的其他人）。如果我删除卷发，它会断裂。如果我在块周围添加括号，它会中断。怎么办？

const MainLayout = (props) => {
  return (
    <div className="main">
      <Header />
      <Navbar />
      <Content>
        {props.children}
      </Content>
      <Footer />
    </div>
  );
};

这是 ESLint v4.13.1

【问题讨论】：

标签： javascript eslint

【解决方案1】：

如果您只是立即返回一个值，则不需要在箭头函数中使用return 语句。只需将值直接放在箭头之后即可。

当只有一个参数时，你不需要在参数列表周围加上括号。

const MainLayout = props => (
    <div className="main">
      <Header />
      <Navbar />
      <Content>
        {props.children}
      </Content>
      <Footer />
    </div>
  );

【讨论】：

然后给出：Unexpected parentheses around single function argument having a body with no curly braces (arrow-parens)
然后去掉括号。
然后给出：Missing parentheses around multilines JSX (react/jsx-wrap-multilines)
只删除 props 周围的括号，而不是 JSX。我认为您可能选择了错误的中间编辑。

【解决方案2】：

您不需要 retun 只需添加 ( 而不是 { 。像这样……

const Card = props => (
  <View style={styles.containerStyle}>{props.children}</View>
);

【讨论】：