React App Unexpected block statement 围绕箭头主体；在 `=>` 之后立即移动返回值。错误信息

Question

我是 React 新手，正在尝试编写自己的应用程序。我有以下使用样式组件的代码。我已经将 Header.js 导入到 App.js 中，准备好在浏览器中呈现。我可以在浏览器中看到输出（Hello Content）。

import React from "react";
import styled from "styled-components";

const Header = () => {
  return (
    <Container>
      <Content>
        <h1>Hello Content</h1>
      </Content>
    </Container>
  );
};

const Container = styled.div``;
const Content = styled.div``;

export default Header

但是当我尝试使用 ESLint 时出现以下错误。我不明白为什么。我添加了我的 eslintrc.json 代码。不知道我的 eslintrc.json 文件代码有没有错。

{
    "extends": ["airbnb", "prettier"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": "error",
        "react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"]}]
    }
}

Answer 1

您的 eslint 配置为不允许只有返回语句的函数。您可以禁用该规则或像这样重写组件：

const Header = () => (
  <Container>
    <Content>
      <h1>Hello Content</h1>
    </Content>
  </Container>
);