reactjs 类型无效--应为字符串(对于内置组件)或类/函数(对于复合组件),但得到的是:未定义的

cvxl0en2  于 2023-03-29  发布在  React
关注(0)|答案(1)|浏览(132)

我想开发一个React应用程序,我想写的形式在卡中,我将使用在这个应用程序作为一个组件,并重用它们。但是,我不知道哪里的错误,我需要帮助。
错误:警告:React.jsx:类型无效--应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
检查您的代码Login.jsx:17。在登录div在应用程序在提供商我得到这个错误在浏览器的控制台,我只看到卡头我不能得到表单元素。

import { Card } from 'antd'
import React from 'react'

function FormCard({title,bordered, align}) {
 return (
  <Card
    title={title}
    bordered = {bordered}
    align = {align}
    style={{
        width: 300,
      }}
>
</Card>
 )
}
export default FormCard
import React from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Row, Col,Card } from 'antd';
import FormCard from '../components/FormCard';

export function Login() {
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
 return (
   <Row gutter={16} justify='center' style={{ marginTop: '30px' }}>
      <Col span={8}>
       <FormCard title={"Giriş Yap"} bordered={false} align={"center"}>
          <Form
           name="normal_login"
             className="login-form"
           initialValues={{
             remember: true,
            }}
            onFinish={onFinish}
          >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your Username!',
            },
          ]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your Password!',
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <a className="login-form-forgot" href="">
            Forgot password
          </a>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
          Or <a href="">register now!</a>
        </Form.Item>
      </Form>
    </FormCard>
  </Col>
</Row>
);
  };
    import './App.css';
    import {Login} from './pages/Login';
    import { Register } from "./pages/Register";

 function App() {
return (
   <div>
     <Login/>
   </div>
);
    };

export default App
iszxjhcz

iszxjhcz1#

我不能说我仔细地看了你的代码的其余部分,但有一个问题是你没有在你的FormCard中呈现children

function FormCard({title, bordered, align, children}) {
 return (
  <Card
    title={title}
    bordered = {bordered}
    align = {align}
    style={{
        width: 300,
      }}
>
{children}
</Card>
 )
}

相关问题