你知道怎么基于React封装一个组件吗？_F11 - 专业站长和开发者的学习网站

分享到

你知道怎么基于React封装一个组件吗？

JavaScript 来源：互联网作者：秩名发布时间：2022-01-25 18:12:22 人浏览

摘要

前言很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题，比如人家的组件会有 color 属性，我们在使用组件时传入组件文档中说明的属性值如 primary ，那么这个组件的字体颜

前言

很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题，比如人家的组件会有 color 属性，我们在使用组件时传入组件文档中说明的属性值如 primary ，那么这个组件的字体颜色会变为 primary 对应的颜色，这是如何做到的？还有别人封装的组件类名都有自己独特的前缀，这是如何处理的呢，难道是 css 类名全部加上前缀吗，这也太麻烦了！

如果你正在困惑这些问题，你可以看看这篇文章。

我会参照 antd的divider组件来讲述如何基于React封装一个组件，以及解答上述的一些问题，请耐心看完！

antd 是如何封装组件的

仓库地址

divider 组件在下图对应目录下 (代码我会拷贝过来，感兴趣的还是可以去克隆一下仓库)

divider 组件源代码

antd 的源码使用了 TypeScript 语法，因此不了解语法的同学要及时了解哦！

import * as React from 'react';

import classNames from 'classnames';

import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';

export interface DividerProps {

prefixCls?: string;

type?: 'horizontal' | 'vertical';

orientation?: 'left' | 'right' | 'center';

className?: string;

children?: React.ReactNode;

dashed?: boolean;

style?: React.CSSProperties;

plain?: boolean;

}

const Divider: React.FC<DividerProps> = props => (

<ConfigConsumer>

{({ getPrefixCls, direction }: ConfigConsumerProps) => {

const {

prefixCls: customizePrefixCls,

type = 'horizontal',

orientation = 'center',

className,

children,

dashed,

plain,

...restProps

} = props;

const prefixCls = getPrefixCls('divider', customizePrefixCls);

const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;

const hasChildren = !!children;

const classString = classNames(

prefixCls,

`${prefixCls}-${type}`,

{

[`${prefixCls}-with-text`]: hasChildren,

[`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,

[`${prefixCls}-dashed`]: !!dashed,

[`${prefixCls}-plain`]: !!plain,

[`${prefixCls}-rtl`]: direction === 'rtl',

},

className,

);

return (

<div className={classString} {...restProps} role="separator">

{children && <span className={`${prefixCls}-inner-text`}>{children}</span>}

</div>

);

}}

</ConfigConsumer>

);

export default Divider;

如何暴露组件属性

在源码中，最先看到的是以下内容，这些属性也就是divider组件所暴露的属性，我们可以 <Divider type='vertical' /> 这样来传入 type 属性，那么 divider 分割线样式就会渲染为垂直分割线，是不是很熟悉！

export interface DividerProps { // interface 是 TypeScript 的语法

prefixCls?: string;

type?: 'horizontal' | 'vertical'; // 限定 type 只能传入两个值中的一个

orientation?: 'left' | 'right' | 'center';

className?: string;

children?: React.ReactNode;

dashed?: boolean;

style?: React.CSSProperties;

plain?: boolean;

}

在上面的属性中，我们还发现 className 和 style是比较常见的属性，这代表我们可以 <Divider type='vertical' className='myClassName' style={{width: '1em'}} /> 这样使用这些属性。

如何设置统一类名前缀

我们知道，antd 的组件类名会有他们独特的前缀 ant-，这是如何处理的呢？继续看源码。

<ConfigConsumer>

{({ getPrefixCls, direction }: ConfigConsumerProps) => {

const {

prefixCls: customizePrefixCls,

type = 'horizontal',

orientation = 'center',

className,

children,

dashed,

plain,

...restProps

} = props;

const prefixCls = getPrefixCls('divider', customizePrefixCls);

从源码中，我们发现 prefixCls ，这里是通过 getPrefixCls 方法生成，再看看 getPrefixCls 方法的源码，如下。

export interface ConfigConsumerProps {

...

getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;

...

}

const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

if (customizePrefixCls) return customizePrefixCls;

return suffixCls ? `ant-${suffixCls}` : 'ant';

};

不难发现此时会生成的类名前缀为 ant-divider 。

如何处理样式与类名

我们封装的组件肯定是有预设的样式，又因为样式要通过类名来定义，而我们传入的属性值则会决定组件上要添加哪个类名，这又是如何实现的呢？下面看源码。

import classNames from 'classnames';

const classString = classNames(

prefixCls,

`${prefixCls}-${type}`,

{

[`${prefixCls}-with-text`]: hasChildren,

[`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,

[`${prefixCls}-dashed`]: !!dashed,

[`${prefixCls}-plain`]: !!plain,

[`${prefixCls}-rtl`]: direction === 'rtl',

},

className,

);

return (

<div className={classString} {...restProps} role="separator">

{children && <span className={`${prefixCls}-inner-text`}>{children}</span>}

</div>

);

我们发现，它通过 classNames 方法）定义了一个所有类名的常量，然后传给了 div 中的 className 属性。

其实生成的类名也就是 ant-divider-horizontal 这个样子，那么css中以此类名定义的样式也就自然会生效了。而 className 和 style 属性则是通过 {...restProps} 来传入。

最后我们再看看它的css样式代码是怎么写的！

divider 组件样式源代码

antd 组件的样式使用 Less 书写，不了解 Less 语法的同学一定要了解一下。

@import '../../style/themes/index';

@import '../../style/mixins/index';

@divider-prefix-cls: ~'@{ant-prefix}-divider'; // 可以看到这里对应的也就是之前说到的类名前缀

.@{divider-prefix-cls} {

.reset-component();

border-top: @border-width-base solid @divider-color;

&-vertical { // 这里的完整类名其实就是 ant-divider-vertical, 也就是 divider 组件的 type 属性值为 vertical 时对应的样式

position: relative;

top: -0.06em;

display: inline-block;

height: 0.9em;

margin: 0 8px;

vertical-align: middle;

border-top: 0;

border-left: @border-width-base solid @divider-color;

}

&-horizontal {

display: flex;

clear: both;

width: 100%;

min-width: 100%;

margin: 24px 0;

}

&-horizontal&-with-text {

display: flex;

margin: 16px 0;

color: @heading-color;

font-weight: 500;

font-size: @font-size-lg;

white-space: nowrap;

text-align: center;

border-top: 0;

border-top-color: @divider-color;

&::before,

&::after {

position: relative;

top: 50%;

width: 50%;

border-top: @border-width-base solid transparent;

// Chrome not accept `inherit` in `border-top`

border-top-color: inherit;

border-bottom: 0;

transform: translateY(50%);

content: '';

}

&-horizontal&-with-text-left {

&::before {

top: 50%;

width: @divider-orientation-margin;

}

&::after {

top: 50%;

width: 100% - @divider-orientation-margin;

}

&-horizontal&-with-text-right {

&::before {

top: 50%;

width: 100% - @divider-orientation-margin;

}

&::after {

top: 50%;

width: @divider-orientation-margin;

}

&-inner-text {

display: inline-block;

padding: 0 @divider-text-padding;

}

&-dashed {

background: none;

border-color: @divider-color;

border-style: dashed;

border-width: @border-width-base 0 0;

}

&-horizontal&-with-text&-dashed {

border-top: 0;

&::before,

&::after {

border-style: dashed none none;

}

&-vertical&-dashed {

border-width: 0 0 0 @border-width-base;

}

&-plain&-with-text {

color: @text-color;

font-weight: normal;

font-size: @font-size-base;

}

@import './rtl';

这样一来，我相信同学们也大概了解如何去封装一个组件以及关键点了，在源码中还有很多地方值得我们学习，比如这里的 ConfigConsumer 的定义与使用，感兴趣的同学欢迎一起交流。

您可能感兴趣的文章 :

原文链接 : https://www.cnblogs.com/guying-blog/p/15612611.html

Tag : 封装(12)React(36)

vue el-switch初始值(默认值)不能正确显示状态问题

el-switch 初始值（默认值）不能正确显示状态先去检查一下接口返回格式如果是字符串不需要加冒号 1 active-value=1 inactive-value=2 如果是数字
微信小程序跳转外部链接的实现方法

微信小程序跳转外部链接在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接实现方法如下： 1、配置业务域
自己写一个uniapp全局弹窗(APP端)

效果图： uniapp自带的提示框不符合我们的要求，需要自己写一个提示框，且全局通用。解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听
JavaScript console对象与控制台使用介绍

1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 1 console.log(console); 2.
JavaScript错误处理机制全面分析介绍

1. Error 实例 JavaScript在运行错误时会抛出一个错误,JS提供了Error构造函数,所有抛出的错误都是这个构造函数的实例 1 2 const err = new Error(代码出
JavaScript Object.defineProperty与proxy代理模式的使用详

1. Object.defineProperty 1 2 const obj = {}; Object.defineProperty(obj,prop,descript); 参数 obj 要定义属性的对象 prop 要定义的属性 descript 属性描述符返回值
Javascript Object对象类型使用介绍

1. 生成方法对象是javaScript中的一种数据类型,它是key-value的合集，是无序的 1 2 3 4 const obj = { name: ian,age: 21}; //key使用变量 const gender = gender
JavaScript代码不能被阻断的稳定性建设

背景稳定性建设之JavaScript代码不能被阻断 js代码可能会因为某些原因，导致出错，进而整个后续代码有可能都被阻断。直接影响线上的稳定
JavaScript前端学算法题解LeetCode最大重复子字符串

最大重复子字符串给你一个字符串sequence，如果字符串word连续重复k次形成的字符串是sequence的一个子字符串，那么单词word的重复值为k。单
uni-app小程序沉浸式导航实现的全过程

项目要在多个页面上加自定义导航栏，还要有渐变效果，就是随着页面上滑，导航栏透明度由0逐渐变为1。这里面有几个基本点需要注意下。