rc-util中文翻译

蚂蚁的工具库 中文翻译

rc-util

react组件常用工具

API

createChainedFunction

(…functions): Function

Create a function which will call all the functions with it’s arguments from left to right.
创建一个能从左到右依次调用所有参数函数

import createChainedFunction from 'rc-util/lib/createChainedFunction';

deprecated

(prop: string, instead: string, component: string): void

Log an error message to warn developers that prop is deprecated.
抛出日志文件警告开发者该‘prop’已弃用

import deprecated from 'rc-util/lib/deprecated';

getContainerRenderMixin

(config: Object): Object

To generate a mixin which will render specific component into specific container automatically.
生成一个mixin，它会自动将特定组件渲染到特定容器中。

import getContainerRenderMixin from 'rc-util/lib/getContainerRenderMixin';

Fields in config and their meanings.
config包含字段及含义

Field	Type	Description	Default
autoMount	boolean	是否自动将组件渲染到容器中	true
autoDestroy	boolean	组件卸载时是否自动移除容器	true
isVisible	(instance): boolean	获取组件当前可见性的函数	-
isForceRender	(instance): boolean	一个函数来确定是否呈现弹出窗口，即使它不可见	-
getComponent	(instance, extra): ReactNode	获取将被渲染到容器中的组件的函数	-
getContainer	(instance): HTMLElement	获取容器的函数

Portal

Render children to the specific container;
将子项渲染到特定容器；

import Portal from 'rc-util/lib/Portal';

Props:

Prop	Type	Description	Default
children	ReactChildren	内容渲染到容器	-
getContainer	(): HTMLElement	获取容器的函数	-

getScrollBarSize

(fresh?: boolean): number

Get the width of scrollbar.
获取滚动条的宽度。

import getScrollBarSize from 'rc-util/lib/getScrollBarSize';

guid

(): string

在当前应用程序中生成全局唯一 ID。

import guid from 'rc-util/lib/guid';

pickAttrs

(props: Object): Object

Pick valid HTML attributes and events from props.
从props中选择有效的 HTML 属性和事件。

import pickAttrs from 'rc-util/lib/pickAttrs';

warn

(msg: string): void

一个 console.warn浅包装

import warn from 'rc-util/lib/warn';

warning

(valid: boolean, msg: string): void

浅包装 warning, 但对同一消息只警告一次。

import warning, { noteOnce } from 'rc-util/lib/warning';

warning(false, '[antd Component] test hello world');

// Low level note
noteOnce(false, '[antd Component] test hello world');

Children

A collection of functions to operate React elements’ children.
操作 React 元素子元素的函数集合。

Children/mapSelf

(children): children

Return a shallow copy of children.
返回一个children的浅拷贝

import mapSelf from 'rc-util/lib/Children/mapSelf';

Children/toArray

(children: ReactNode[]): ReactNode[]

将children转换为数组。

import toArray from 'rc-util/lib/Children/toArray';

Dom

操作 DOM 元素的函数集合。

Dom/addEventlistener

(target: ReactNode, eventType: string, listener: Function): { remove: Function }

浅拷贝 add-dom-event-listener.

import addEventlistener from 'rc-util/lib/Dom/addEventlistener';

Dom/canUseDom

(): boolean

检查 DOM 是否可用。

import canUseDom from 'rc-util/lib/Dom/canUseDom';

Dom/class

操作 DOM 节点类名的函数集合。

• hasClass(node: HTMLElement, className: string): boolean
• addClass(node: HTMLElement, className: string): void
• removeClass(node: HTMLElement, className: string): void

import cssClass from 'rc-util/lib/Dom/class;

Dom/contains

(root: HTMLElement, node: HTMLElement): boolean

检查 node 是否等于 root 或在 root 的子树中。

import contains from 'rc-util/lib/Dom/contains';

Dom/css

用于获取或设置 css 样式的函数集合。

• get(node: HTMLElement, name?: string): any
• set(node: HTMLElement, name?: string, value: any) | set(node, object)
• getOuterWidth(el: HTMLElement): number
• getOuterHeight(el: HTMLElement): number
• getDocSize(): { width: number, height: number }
• getClientSize(): { width: number, height: number }
• getScroll(): { scrollLeft: number, scrollTop: number }
• getOffset(node: HTMLElement): { left: number, top: number }

import css from 'rc-util/lib/Dom/css';

Dom/focus

操作DOM节点焦点状态的函数集合。

• saveLastFocusNode(): void
• clearLastFocusNode(): void
• backLastFocusNode(): void
• getFocusNodeList(node: HTMLElement): HTMLElement[] get a list of focusable nodes from the subtree of node.
• limitTabRange(node: HTMLElement, e: Event): void

import focus from 'rc-util/lib/Dom/focus';

Dom/support

{ animation: boolean | Object, transition: boolean | Object }

用于判断当前环境是否支持“animationend”或“transitionend”。

import support from 'rc-util/lib/Dom/support';

KeyCode

Enum

KeyCode的枚举 详情在 definition

import KeyCode from 'rc-util/lib/KeyCode';

KeyCode.isTextModifyingKeyEvent

(e: Event): boolean

是否同时输入文本和修改后的键。

KeyCode.isCharacterKey

(keyCode: KeyCode): boolean

是否输入字符。

ScrollLocker

ScrollLocker<{lock: (options: {container: HTMLElement}) => void, unLock: () => void}>

改进页面滚动条隐藏时的抖动。
ScrollLocker 改变 body 样式，并在调用时添加一个类 ant-scrolling-effect，所以如果你的页面看起来不正常，请检查这个；

import ScrollLocker from 'rc-util/lib/Dom/scrollLocker';

const scrollLocker = new ScrollLocker();

// lock
scrollLocker.lock()

// unLock
scrollLocker.unLock()

License

MIT