React 未正确导入组件

Question

我有这个简单的 React 代码，但无法正确导入，我不知道为什么。

import teste from './components/teste';
import './App.css';


function App() {
  return (
    <Container>
        <teste/>
    </Container>
  );
}

const Container = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background: blue;
`

export default App;

还有 teste 组件

import React from 'react'

export default function teste() {
  return (
    <div>teste</div>
  )
}

这是文件夹结构 有人可以帮助我吗？

Answer 1

组件的名称需要以大写字母开头，否则React不会将其视为组件。尝试将您的组件重命名为

Test

它应该可以工作。