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

This article mainly explains "what is the method of encapsulating a component based on React". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the method of encapsulating a component based on React".

How antd encapsulates the warehouse address of a component

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, which is then passed to the className attribute 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' Thank you for your reading, the above is the content of "what is the method of encapsulating a component based on React". After the study of this article, I believe you have a deeper understanding of what the method of encapsulating a component based on React is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.