antd中的'Form.Item'和'div'有什么区别？

Question

i have a question. the question is about difference 'Form.Item' and 'div'.

Could I changes the tag 'Form.Item' to 'div'?

below, I copy and paste antd docs of 'Form.Item'.

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

const HorizontalLoginForm = () => {
  const [form] = Form.useForm();
  const [, forceUpdate] = useState();

  // To disable submit button at the beginning.
  useEffect(() => {
    forceUpdate({});
  }, []);

  const onFinish = values => {
    console.log('Finish:', values);
  };

  return (
    <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
      <Form.Item        <<<<<<<< here!!!   Could i change the tag to 'div'? What is the difference both?
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
      </Form.Item>      <<<<<<<< here!!!   Could i change the tag to 'div'? What is the difference both?

Answer 1

Assume you made a child component named FieldItem and it takes props like rules,name then you imported in parent component and you are going to use it in dis way <FieldItem rule="check" name="test" /> . Do you think you can replace FieldItem with div and provide rules,name props gonna work?