Shulou(Shulou.com)06/02 Report--

This article will explain in detail about the implementation steps of React-based packaging components, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Preface

Many friends will encounter a lot of problems like me when they try to encapsulate components for the first time, for example, other people's components will have color attributes, and when we use components, we pass in the attribute values described in the component document, such as primary, then the font color of this component will become the corresponding color of primary, how is this done? There are others encapsulated component class names have their own unique prefix, this is how to deal with it, is the css class name all prefixed, this is too troublesome!

If you are confused about these questions, you can read this article.

I will refer to the divider component of antd to explain how to encapsulate a component based on React and answer some of the above questions. Please read it patiently!

How antd encapsulates components

Warehouse address

Antd warehouse address: https://github.com/ant-design/ant-design

The divider components are located in the corresponding directory of the following figure (I will copy the code over, but if you are interested, you can go to clone the warehouse)

Divider component source code

The source code of antd uses TypeScript syntax, so students who do not understand grammar should know it in time!

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 = props = > ({({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}-room`]:!! plain, [` ${prefixCls}-rtl`]: direction = = 'rtl',}, className,) Return ({children & & {children}});}}); how export default Divider; exposes component properties

In the source code, the first thing to see is the following, these attributes are exposed by the divider component, we can pass in the type attribute, then the divider split line style will be rendered as a vertical split line, is not very familiar!

Export interface DividerProps {/ / interface is the syntax of TypeScript prefixCls?: string; type?: 'horizontal' |' vertical'; / / limits that type can only pass in one of the two values orientation?: 'left' |' right' | 'center'; className?: string; children?: React.ReactNode; dashed?: boolean; style?: React.CSSProperties; plain?: boolean;}

Among the attributes above, we also found that className and style are more common properties, which means that we can use these properties in this way.

How to set a uniform class name prefix

We know that the component class names of antd will have their unique prefix ant-,. How do you handle this? Keep looking at the source code.

{({getPrefixCls, direction}: ConfigConsumerProps) = > {const {prefixCls: customizePrefixCls, type = 'horizontal', orientation =' center', className, children, dashed, plain,... restProps} = props; const prefixCls = getPrefixCls ('divider', customizePrefixCls)

From the source code, we find prefixCls, which is generated by the getPrefixCls method, and then take a look at the source code of the getPrefixCls method, as follows.

Export interface ConfigConsumerProps {... GetPrefixCls: (suffixCls?: string, customizePrefixCls?: string) = > string;...} const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) = > {if (customizePrefixCls) return customizePrefixCls; return suffixCls? `ant-$ {suffixCls} `: 'ant';}

It is not difficult to find that the generated class name is prefixed with ant-divider.

How to deal with styles and class names

The component we encapsulate must have a default style, and because the style is defined by the class name, and the property value we pass in determines which class name to add to the component, how is this implemented? Let's look at the source code.

Import classNames from 'classnames' Const classString = classNames (prefixCls, `${prefixCls}-${type}`, {[`${prefixCls}-with- text`]: hasChildren, [` ${prefixCls}-with-text$ {orientationPrefix} `]: hasChildren, [` ${prefixCls}-dashed`]:!! dashed, [`${prefixCls}-dashed`]:!! plain, [` ${prefixCls}-rtl`]: direction = 'rtl',}, className,) Return ({children & & {children}})

We found that it defines a constant for all class names through the classNames method (classNames is a component that React handles multiple class names), which is then passed to the className property in div.

In fact, the generated class name is just like ant-divider-horizontal, so the style defined by this class name in css will naturally take effect. The className and style attributes are passed in through {... restProps}.

Finally, let's see how the css style code is written!

Divider component style source code

The style of the antd component is written in Less. Students who do not understand the Less syntax must understand it.

@ import'.. /.. / style/themes/index';@import'.. /.. / style/mixins/index';@divider-prefix-cls: ~'@ {ant-prefix}-divider'; / / you can see here the corresponding class name prefix. @ {divider-prefix-cls} {.reset-component (); border-top: @ border-width-base solid @ divider-color &-vertical {/ / the full class name here is actually ant-divider-vertical, that is, the style position when the type attribute value of the divider component is vertical: relative; top:-0.06em. display: inline-block; height: 0.9em. margin: 08px. 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 `accounit`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: 000 @ border-width-base;} &-plain&-with-text {color: @ text-color; font-weight: normal; font-size: @ font-size-base;}} @ import'. / rtl'

In this way, I believe students probably know how to encapsulate a component and key points, there are still many places in the source code for us to learn, such as the definition and use of ConfigConsumer here.

On the implementation steps of React-based packaging components is shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.