摘要：作为开发当中使用相对频繁的一个组件，其实现也很简单，但是其中比较麻烦的一部分是字体的制作，可以参看这篇文章。接口中的种属性方法，不属于上述六种。为事件属性，可以大家也可以根据上面所提供的制作的方法和这样的方式来实现自己的组件
Icon
icon作为开发当中使用相对频繁的一个组件，其实现也很简单，但是其中比较麻烦的一部分是icon字体的制作，可以参看这篇文章。
Antd的Icon组件使用了很简单的css来实现交互与动效
import React from "react";
import classNames from "classnames";
import omit from "omit.js";
//classNames是条件判断输出className的值
//omit是移出对象的指定属性，而实现浅拷贝
//定义IconProps接口
export interface IconProps {
type: string;
className?: string;
title?: string;
onClick?: React.MouseEventHandler;
spin?: boolean;
style?: React.CSSProperties;
}
const Icon = (props: IconProps) => {
const { type, className = "", spin } = props;
const classString = classNames({
anticon: true,
"anticon-spin": !!spin || type === "loading", // 是否需要旋转动画，loading这个icon是默认加上旋转动效的
[`anticon-${type}`]: true,
}, className);
// 这里说一下为什么要用omit()：html的标签，其标准标签属性只有六种：id、class、title、style、dir、lang。
// IconProps接口中的6种属性（方法），type、spin不属于上述六种。onClick为事件属性，可以；
return ;
};
export default Icon;
大家也可以根据上面所提供的制作icon的方法和这样的方式来实现自己的Icon组件
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89006.html
Button Button包括了两个组件，Button与ButtonGroup。 ButtonProps 看一个组件首先看的是他的传参也就是props，所以我们这里先看Button组件的ButtonProps export type ButtonType = primary | ghost | dashed | danger; export type ButtonShape = circl...
github: 地址gitbook: 地址 Index.js 看一个代码的时候首先当然是从他的入口文件开始看起，所以第一份代码我们看的是/index.js文件 开始 打开index.js文件，代码只有28行，其中包含了一个camelCase函数（看函数名就知道这是个给名称进行驼峰命名法的函数），一个req变量，以及这个的变量操作和export操作 在这个文件里面我首先查了require.conte...
摘要：结构项目结构如下，负责外层封装，负责事件绑定与渲染控制。节点通过决定事件绑定情况，即通过属性绑定事件情况，事件控制组件的属性，这里就不详细说了。为隐藏状态下的添加的，并包裹懒加载组件。 引言 antd的Tooltip组件在react-componment/trigger的基础上进行封装，而组件Popover和Popconfirm是使用Tooltip组件的进行pop，在react-com...
摘要：这个组件是一个图钉组件，使用的布局，让组件固定在窗口的某一个位置上，并且可以在到达指定位置的时候才去固定。 Affix 这个组件是一个图钉组件，使用的fixed布局，让组件固定在窗口的某一个位置上，并且可以在到达指定位置的时候才去固定。 AffixProps 还是老样子，看一个组件首先我们先来看看他可以传入什么参数 // Affix export interface Affix...
摘要：引言看过源码的都知道，其实是在一组组件的基础上进行了一层封装，本文主要解读组件的基础组件，另外会略过模式下的代码。解读源码首先要从自己最常用的或者感兴趣的入手，首先组件最主要的还是在这个装饰器入手。 引言 看过antd源码的都知道，antd其实是在一组react-componment组件的基础上进行了一层ui封装，本文主要解读antd组件Form的基础组件react-componmen...
阅读 646·2021-10-09 09:41
阅读 623·2019-08-30 15:53
阅读 1052·2019-08-30 15:53
阅读 1188·2019-08-30 11:01
阅读 1541·2019-08-29 17:31
阅读 964·2019-08-29 14:05
阅读 1690·2019-08-29 12:49
阅读 386·2019-08-28 18:17
