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>
);

Answer 3

從您的 VS Code 編輯器中刪除上述擴展問題將得到解決