資訊專欄INFORMATION COLUMN
摘要：作為開發當中使用相對頻繁的一個組件，其實現也很簡單，但是其中比較麻煩的一部分是字體的制作，可以參看這篇文章。接口中的種屬性方法，不屬于上述六種。為事件屬性，可以大家也可以根據上面所提供的制作的方法和這樣的方式來實現自己的組件
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組件
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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...
閱讀 661·2021-10-09 09:41
閱讀 641·2019-08-30 15:53
閱讀 1071·2019-08-30 15:53
閱讀 1207·2019-08-30 11:01
閱讀 1562·2019-08-29 17:31
閱讀 983·2019-08-29 14:05
閱讀 1712·2019-08-29 12:49
閱讀 409·2019-08-28 18:17
