用Antd和React写的Antd介绍网站，源码有详细注释

最新推荐文章于 2025-06-12 13:31:43 发布

陈铭-机器学习

最新推荐文章于 2025-06-12 13:31:43 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

文章标签： AntDesign git React javascript

本文链接：https://blog.csdn.net/a986597353/article/details/78460549

git仓库地址：https://github.com/mingChen2017/Antd-React-example

演示地址：39.108.54.113/antd

这是一个非常简单的例子，利用了AntD和react，希望能帮助初学者学习，特别是在ModuleDescribe.js，即组件->组件介绍这一页面有非常多详细的注释，后续我会继续完善。

import React from 'react';
import QueueAnim from 'rc-queue-anim';
import PropTypes from 'prop-types';
import TweenOne, { TweenOneGroup } from 'rc-tween-one';
import Icon from 'antd/lib/icon';
import './moduleDescribe.css'


const textData = {
    //title: 'General',
};
//数据数组，把页面的显示层再分为数据和逻辑
let dataArray = [
    {
        title: 'General',
        background: '#ffd8d8',
        subTitle:'按钮和图标',
        //如果在这里要用css的符号实现分行或者是其他功能，那么需要加上一个父级标签
        //这里的写法还不够纯净，作为model层应该只存放数据而不包括html语句，我个人认为合理的做法是把这部分数据设置成一个数组，在ViewMode层再遍历后转成html
        content:
            <div>
                <h3>	•按钮</h3>
                <p></p>
                <h3>	•图标（icon）：提供了上百个符合antd设计规范的图标</h3>
            </div>
    },
    {
        title: 'Layout',
        background: '#fed7ff',
        subTitle:'展示',
        content:
            <div>
                <p>	•栅格</p>
                <p>	•布局：Layout Header Sider Content Footer</p>
            </div>
    },
    {
        title: 'Navigation' ,
        background: '#d3d1ff',
        subTitle:'导航',
        content:
            <div>
                <p>	•固钉：将页面元素钉在可视范围。</p>
                <p>	•面包屑：显示当前页面在系统层级结构中的位置，并能向上返回。</p>
                <p>	•下拉菜单</p>
                <p>	•导航菜单</p>
                <p>	•分页</p>
                <p>	•步骤条：引导用户按照流程完成任务的导航条</p>
            </div>
    },
    {
        title: 'Data Entry' ,
        background: '#afdbe1',
        subTitle:'数据输入',
        content:
            <div>
                <p>	•自动完成：输入框自动完成功能</p>
                <p>	•级联选择</p>
                <p>	•多选框</p>
                <p>	•日期选择框</p>
                <p>	•表单</p>
                <p>	•数字输入框</p>
                <p>	•输入款</p>
                <p>	•提及</p>
                <p>	•评分</p>
                <p>	•单选框</p>
                <p>	•滑动输入条</p>
                <p>	•开关</p>
                <p>	•树选择</p>
                <p>	•时间选择框</p>
                <p>	•穿梭框</p>
                <p>	•上传</p>
            </div>
    },
    {
        title: 'Data Display' ,
        background: '#bee1c5',
        subTitl