React中Ant Design登录组件导入报错问题排查与解决

我制作了一个登录页，使用Bootstrap时运行正常，但切换为Ant Design编辑保存后出现错误，错误信息如下：

"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the rendering method of LoginForm."

旧版本组件可正常运行，新版本出现上述问题，组件代码如下：

import React, { useState } from 'react';
import { Form, Button, Card, Tabs, Input } from 'antd';
import { UserOutlined, MailOutlined, LockOutlined } from '@ant-design/icons';

const { TabPane } = Tabs;

const LoginForm = () => {
  const [activeTab, setActiveTab] = useState('login');

  const handleTabChange = key => {
    setActiveTab(key);
  };

  return (
    <div className="d-flex justify-content-center align-items-center mt-5">
      <Card style={{ width: '400px' }}>
        <Card.Body>
          <Tabs
            activeKey={activeTab}
            onSelect={handleTabChange}
            className="mb-3"
          >
            <TabPane tab="Login" key="login">
              <Form>
                <Form.Item
                  label="Email"
                  name="loginEmail"
                  rules={[{ required: true, message: 'Lütfen email adresinizi girin!' }]}
                >
                  <Input prefix={<MailOutlined />} />
                </Form.Item>

                <Form.Item
                  label="Şifre"
                  name="loginPassword"
                  rules={[{ required: true, message: 'Lütfen şifrenizi girin!' }]}
                >
                  <Input.Password prefix={<LockOutlined />} />
                </Form.Item>

                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    Giriş Yap
                  </Button>
                </Form.Item>
              </Form>
            </TabPane>

            <TabPane tab="Register" key="register">
              <Form>
                <Form.Item
                  label="Ad"
                  name="registerName"
                  rules={[{ required: true, message: 'Lütfen adınızı girin!' }]}
                >
                  <Input prefix={<UserOutlined />} />
                </Form.Item>

                <Form.Item
                  label="Email"
                  name="registerEmail"
                  rules={[{ required: true, message: 'Lütfen email adresinizi girin!' }]}
                >
                  <Input prefix={<MailOutlined />} />
                </Form.Item>

                <Form.Item
                  label="Şifre"
                  name="registerPassword"
                  rules={[{ required: true, message: 'Lütfen şifrenizi girin!' }]}
                >
                  <Input.Password prefix={<LockOutlined />} />
                </Form.Item>

                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    Kayıt Ol
                  </Button>
                </Form.Item>
              </Form>
            </TabPane>
          </Tabs>
        </Card.Body>
      </Card>
    </div>
  );
};

export default LoginForm;

• 核心问题：你误用了Bootstrap的Card结构写法，Ant Design的Card组件并没有Card.Body这个子组件，该元素为undefined，直接导致了渲染报错。
• 修复步骤：
  1. 删除代码中的<Card.Body>和</Card.Body>标签，直接将Tabs组件作为Card的子元素。
  2. 保持其他Ant Design组件的导入和使用方式不变。

修改后的完整代码：

import React, { useState } from 'react';
import { Form, Button, Card, Tabs, Input } from 'antd';
import { UserOutlined, MailOutlined, LockOutlined } from '@ant-design/icons';

const { TabPane } = Tabs;

const LoginForm = () => {
  const [activeTab, setActiveTab] = useState('login');

  const handleTabChange = key => {
    setActiveTab(key);
  };

  return (
    <div className="d-flex justify-content-center align-items-center mt-5">
      <Card style={{ width: '400px' }}>
        <Tabs
          activeKey={activeTab}
          onSelect={handleTabChange}
          className="mb-3"
        >
          <TabPane tab="Login" key="login">
            <Form>
              <Form.Item
                label="Email"
                name="loginEmail"
                rules={[{ required: true, message: 'Lütfen email adresinizi girin!' }]}
              >
                <Input prefix={<MailOutlined />} />
              </Form.Item>

              <Form.Item
                label="Şifre"
                name="loginPassword"
                rules={[{ required: true, message: 'Lütfen şifrenizi girin!' }]}
              >
                <Input.Password prefix={<LockOutlined />} />
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit">
                  Giriş Yap
                </Button>
              </Form.Item>
            </Form>
          </TabPane>

          <TabPane tab="Register" key="register">
            <Form>
              <Form.Item
                label="Ad"
                name="registerName"
                rules={[{ required: true, message: 'Lütfen adınızı girin!' }]}
              >
                <Input prefix={<UserOutlined />} />
              </Form.Item>

              <Form.Item
                label="Email"
                name="registerEmail"
                rules={[{ required: true, message: 'Lütfen email adresinizi girin!' }]}
              >
                <Input prefix={<MailOutlined />} />
              </Form.Item>

              <Form.Item
                label="Şifre"
                name="registerPassword"
                rules={[{ required: true, message: 'Lütfen şifrenizi girin!' }]}
              >
                <Input.Password prefix={<LockOutlined />} />
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit">
                  Kayıt Ol
                </Button>
              </Form.Item>
            </Form>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};

export default LoginForm;

• 额外优化：如果需要给Card内容添加内边距，可以通过Card的bodyStyle属性设置，示例：

<Card style={{ width: '400px' }} bodyStyle={{ padding: '16px' }}>

内容的提问来源于stack exchange，提问作者Furkan Pusat