纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

React 封装组件 基于React封装组件的实现步骤

孤影的博客   2021-11-28 我要评论
想了解基于React封装组件的实现步骤的相关内容吗孤影的博客在本文为您仔细讲解React 封装组件的相关知识和一些Code实例欢迎阅读和指正我们先划重点:React 封装组件,React 组件封装下面大家一起来学习吧

前言

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

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

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

antd 是如何封装组件的

仓库地址

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 方法(classNames是React处理多类名的组件)定义了一个所有类名的常量然后传给了 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 的定义与使用感兴趣的同学欢迎一起交流


相关文章

猜您喜欢

  • Java发送表白邮件 手把手教你用Java给暗恋对象发送一份表白邮件

    想了解手把手教你用Java给暗恋对象发送一份表白邮件的相关内容吗/少司命在本文为您仔细讲解Java发送表白邮件的相关知识和一些Code实例欢迎阅读和指正我们先划重点:java发送表白邮件,java 发送邮件,用java表白下面大家一起来学习吧..
  • java导出excel Java实现导出Excel功能

    想了解Java实现导出Excel功能的相关内容吗zexzhang在本文为您仔细讲解java导出excel的相关知识和一些Code实例欢迎阅读和指正我们先划重点:java导出excel,java导出excel功能下面大家一起来学习吧..

网友评论

Copyright 2020 www.eleasoftware.com 【绿软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式