React报'Container' is not defined react/jsx-no-undef错误如何解决？

你在JSX语法中直接使用了<Container>标签，但没有提前使用styled-components的API定义该样式组件，触发了ESLint的react/jsx-no-undef（禁止使用未定义变量）校验规则，因此抛出错误。

• 先使用styledAPI完成Container样式组件的定义后再在组件内调用即可，修改后的完整代码如下：

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

// 新增Container样式组件的定义
const Container = styled.div`
  // 此处可根据需求添加自定义样式
  padding: 20px;
  background: #fff;
`

function Home() {
    return (
        <Container>
            home
        </Container>
    )
}

export default Home

• 若你需要Container对应其他HTML原生标签，只需替换styled.div为对应标签即可，比如styled.main、styled.section等均为合法写法。

内容的提问来源于stack exchange，提问作者Pamod Akalanka