ES6：围绕箭头主体的意外块语句

Question

我已经看到了一些关于此的问题，但我无法理解它。

问题：

const Component = ({ data }) => {
  return (
    <Wrapper>
      // lots of components, .jsx logic, inline ifs, styles etc.
    </Wrapper>
  );
};

对于上面的代码 ESLinter (airbnb) 返回：

箭头主体周围出现意外的块语句；移动返回的 紧跟在=>.eslint(arrow-body-style) 之后的值

我想修复它，而不是忽略它。

1。修复 #1（不工作）：

以前回答过here，但没有帮助。

const Component = ({ data }) =>
  <Wrapper>
    (...)
  </Wrapper>

多行 JSX 周围缺少括号 eslint(react/jsx-wrap-multilines)

我很高兴，因为它看起来很糟糕。

2。解决方案 #2（不起作用）：

const Component = ({ data }) => {
  <Wrapper>
    (...)
  </Wrapper>
}

ESLint 很高兴（尽管它迫使我在 </Wrapper> 之后插入 ; 并且看起来很糟糕。无论如何，无论我的应用程序如何损坏：

Error: Component(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

我做错了什么？ :(

Answer 1

你需要

(1) 使用隐式返回（无{s）

(2) 将返回的 JSX 用括号括起来以满足jsx-wrap-multilines:

const Component = ({ data }) => (
  <Wrapper>
    // lots of components, .jsx logic, inline ifs, styles etc.
  </Wrapper>
);