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

Question

此规则由以下代码片段触发，最令人困惑（对我和其他人来说）。如果我去除卷曲，它就会破裂。如果我在块周围添加括号，它就会中断。怎么办？

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

这是 ESLint v4.13.1

Answer 1

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

当只有一个参数时，您不需要在参数列表两边加上括号。

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

Answer 2

你不需要 retun 只需添加 ( 而不是 { 。像这样...

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

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

ESLint: Unexpected block statement surrounding arrow body. (arrow-body-style)

javascript

eslint

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

ESLint: Unexpected block statement surrounding arrow body. (arrow-body-style)

javascript

eslint

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