在 React 中导入元素时遇到问题

Question

我在我的项目中准备了一个登录页面。通常，我用 bootstrap 编辑它并且它可以工作。

但是当我用ant desing编辑并保存时，出现错误。这是错误消息：

"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;

解决登录表单导入问题

Answer 1

据我所知，Antd 不再支持

TabPane

，所以这可能是您问题的原因。

也许这个帖子可以帮助您解决问题：https://github.com/ant-design/ant-design/issues/42021

或者直接查看 Antd 官方文档中关于如何在新版本中使用选项卡的一些示例：https://ant.design/components/tabs

或者你可以直接降级你的 Antd，但不推荐这样做。