React antd的基本使用

安装Antd

首先，确保您的项目已经创建并配置了React环境。然后，您可以通过以下命令使用npm或yarn安装Antd：

代码语言：javascript复制

npm install antd

或

代码语言：javascript复制

yarn add antd

安装完成后，您可以在项目中引入Antd组件并开始使用。

引入样式

在使用Antd组件之前，您需要引入Antd的样式表。可以通过以下方式引入样式：

代码语言：javascript复制

import 'antd/dist/antd.css';

将上述代码放置在项目的根组件或入口文件中即可。

基本组件使用

Antd提供了大量的组件，用于构建各种不同的用户界面。下面是一些常用组件的示例用法：

Button（按钮）

代码语言：javascript复制

import React from 'react';
import { Button } from 'antd';

const Example = () => {
  return (
    <div>
      <Button type="primary">Primary Button</Button>
      <Button>Default Button</Button>
      <Button type="dashed">Dashed Button</Button>
      <Button type="text">Text Button</Button>
      <Button type="link">Link Button</Button>
    </div>
  );
};

export default Example;

Input（输入框）

代码语言：javascript复制

import React from 'react';
import { Input } from 'antd';

const Example = () => {
  return (
    <div>
      <Input placeholder="Basic Input" />
      <Input.Search placeholder="Search Input" enterButton />
      <Input.TextArea placeholder="Textarea" autoSize={{ minRows: 2, maxRows: 6 }} />
    </div>
  );
};

export default Example;

Layout（布局）

代码语言：javascript复制

import React from 'react';
import { Layout, Menu } from 'antd';

const { Header, Content, Footer } = Layout;

const Example = () => {
  return (
    <Layout>
      <Header>Header</Header>
      <Content>Content</Content>
      <Footer>Footer</Footer>
    </Layout>
  );
};

export default Example;

Form（表单）

代码语言：javascript复制

import React from 'react';
import { Form, Input, Button } from 'antd';

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

  return (
    <Form onFinish={onFinish}>
      <Form.Item name="name" label="Name" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email' }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Example;

以上只是一小部分Antd组件的示例用法，您可以根据需要查阅Antd的官方文档，了解更多组件的使用方法。

react

0 人点赞