React JS 应用程序出现错误 - 错误：元素类型无效

Question

我使用 create react app 创建了一个应用。我添加了一个名为 Signup 的功能组件，它是从 App.js 调用的。我在屏幕上遇到错误。它说我没有正确导出组件。我不明白出了什么问题。我把三个组件文件放在这里。

这是我的文件结构

Signup.js

import React, { useRef } from 'react'
import {Card, Form, Button} from 'react-bootstrap';

export default function Signup() {

    const emailRef = useRef();
    const passwordRef = useRef();
    const passwordConfirmRef = useRef();
    
    return (
        <>
            <Card>
                <Card.Body>
                    <h2 className="text-center mb-4">Sign up</h2>
                    <Form>
                        <Form.Group id="email">
                            <Form.label>Email</Form.label>
                            <Form.Control type="email" ref={emailRef} required />
                        </Form.Group>
                        <Form.Group id="password">
                            <Form.label>Email</Form.label>
                            <Form.Control type="password" ref={passwordRef} required />
                        </Form.Group>
                        <Form.Group id="password-confirm">
                            <Form.label>Confirm Password</Form.label>
                            <Form.Control type="password" ref={passwordConfirmRef} required />
                        </Form.Group>
                        <Button className="w-100" type="submit">Sign Up</Button>
                    </Form>
                </Card.Body>
            </Card>
            <div className="w-100 text-center mt-2">
                Already have an account? Login
            </div>
        </>
    )
}

App.js

import React from 'react';
import './App.css'
import Signup from './components/Signup'

export default function App() {
  return (
    <div className="App">
      <Signup/>
    </div>
  );
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

文件夹结构

src (folder)
- App.js
- index.js
-- components (folder)
--- Signup.js

错误

Answer 1

<Form.label> 似乎不是 react-bootstrap 文档中的正确语法，我怀疑这是导致 element type is invalid 错误的原因。

尝试将其更改为<Form.Label>