@fluentui/react-bindings
一套可再使用的组件和钩子来构建组件库和UI工具包.
安装
国家预防机制
npm install --save @fluentui/react-bindings
雅伦
yarn add @fluentui/react-bindings
钩子
useAccesibility()
反应钩为无障碍行为提供绑定.
使用量
下面的例子假设一个叫做 <Image> 将以此方式使用:
const imageBehavior: Accessibility<{ disabled: boolean }> = props => ({
attributes: {
root: {
'aria-disabled': props.disabled,
tabIndex: -1,
},
img: {
role: 'presentation',
},
},
keyActions: {
root: {
click: {
keyCombinations: [{ keyCode: 13 /* equals Enter */ }],
},
},
},
});
type ImageProps = {
disabled?: boolean;
onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
src: string;
};
const Image: React.FC<ImageProps> = props => {
const { disabled, onClick, src, ...rest } = props;
const getA11Props = useAccessibility(imageBehavior, {
mapPropsToBehavior: () => ({
disabled,
}),
actionHandlers: {
click: (e: React.KeyboardEvent<HTMLDivElement>) => {
if (onClick) onClick(e);
},
},
});
return (
<div {...getA11Props('root', { onClick, ...rest })}>
<img {...getA11Props('img', { src })} />
</div>
);
};
useStyles()
一个反应钩子,为用法CSSinJS风格和流畅的取材提供绑定.
使用量
下面的例子假设一个叫做 <Text> 将以此方式使用:
type TextComponentProps = {
className?: string;
color?: string;
};
const Text: React.FunctionComponent<TextComponentProps> = props => {
const { className, children, color } = props;
const { classes } = useStyles('Text', {
className: 'ui-text',
mapPropsToStyles: () => ({ color }),
});
return <span className={classes.root}>{children}</span>;
};
参考文献
const { classes } = useStyles(
displayName: string,
options: UseStylesOptions<Props>,
)
displayName- 在主题中查找的组件名称options.className- 可选的,特殊类名,将永远添加到root插槽options.mapPropsToStyles- 可选的,将传递样式功能的一套道具,只允许原始的options.rtl- 可选,设置RTL模式
useUnhandledProps()
一个反应钩子,它返回一个超出组件范围的由道具组成的对象. 用于从用户获取和传播未知道具.
使用量
下面的例子假设一个叫做 <Text> 将以此方式使用:
type TextComponentProps = React.HTMLAttributes<HTMLSpanElement> * {
className?: string;
};
const Text: React.FunctionComponent<TextComponentProps> = props => {
const { className, children } = props;
const unhandledProps = useUnhandledProps(['className'], props);
return <span {...unhandledProps} className={classes.root}>{children}</span>;
};
参考文献
const unhandledProps = useUnhandledProps(handledProps, props);
unhandledProps- 按部件分列的无手取道具物体handledProps- 由处理过的道具名称组成的阵列props- 将所有道具传递给组件的物体