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

This article introduces "how to use React Portals to achieve a powerful drawer component" related knowledge, in the actual case operation process, many people will encounter such a dilemma, then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

Text

Before starting component design, I hope you have some basic knowledge of css3 and js, and understand the basic react/vue syntax. Let's first look at the effect of the components after implementation:

1. Component design idea

According to the component design principles summarized by the author before, our first step is to identify the requirements. A Drawer component will have the following demand points:

Can control whether the drawer is visible

Can manually configure the close button of the drawer

Can control the opening direction of the drawer

Whether to destroy the child elements in the drawer when closing it (this problem is frequently encountered at work)

Specify the HTML node of the Drawer mount, and you can mount the drawer on any element

Click the mask layer to control whether the drawer is allowed to be closed.

Can control the display of the mask layer

Custom drawer pop-up layer styl

You can set the width of the drawer pop-up layer

Can control the pop-up level.

Can control the pop-up direction of the drawer (up and down, left and right)

When you click the close button, you can provide a callback for developers to do related operations.

After the requirements are collected, as an aspiring programmer, you will come up with the following wireframe diagram:

For react contestants, if typescript is not used, it is recommended that everyone use PropTypes, which is react's built-in type checking tool, which we can import directly into the project. Vue has its own attribute detection method, which will not be introduced here.

Through the above requirements analysis, do you think that it is very complicated for a drawer component to achieve so many functions? It's a little complicated, but don't be afraid, with the above accurate requirements analysis, we just need to implement the function points step by step. For our commonly used table components, modal components and so on, we also need to consider many usage scenarios and function points. For example, the table component of antd exposes dozens of properties. If we do not sort out the specific requirements, it is very troublesome to implement such components. Next let's take a look at the concrete implementation.

two。 Implement a Drawer component 2.1. 1 based on react. Design of Drawer component Framework

First of all, let's write the component framework according to the requirements, so that the business logic will be written more clearly:

Import PropTypes from 'prop-types' import styles from'. / index.less' / * * Drawer drawer component * @ param {visible} whether the bool drawer is visible * @ param {closable} bool displays the close button in the upper right corner * @ param {destroyOnClose} bool destroys the child elements inside when closed * @ param {getContainer} HTMLElement specifies the HTML node mounted by Drawer False is mounted on the current dom * @ param {maskClosable} bool Click Mask whether to close the drawer * @ param {mask} bool displays the mask * @ param {drawerStyle} object is used to set the style of the drawer pop-up layer * @ param {width} number | string pop-up layer width * @ param {zIndex} number pop-up level * @ param {placement} string drawer direction * @ param {onClose} string click to close Callback * / function Drawer (props) {const {closable = true DestroyOnClose, getContainer = document.body, maskClosable = true, mask = true, drawerStyle, width = '300pxrabbit, zIndex = 10, placement =' right', onClose, children} = props const childDom = ({setVisible (false) onClose & & onClose ()} useEffect () = > {setVisible (props.visible)} [props.visible]) const childDom = ({! mask & &} {children} {! closable & & X}) return childDom}

The above implementation process is worth noting that our component design uses react hooks technology, here the use of useState, useEffect, if you do not understand can go to the official website to learn, very simple, if you do not understand can communicate with the author or ask questions in the comments area. Drawer animation we control the width of the contents of the drawer to achieve, with overflow:hidden, I will attach a separate css code for your reference.

2.3 implementation of destroyOnClose

DestroyOnClose is mainly used to clear the component cache, and the more common scenario is to enter text. For example, when the content of my drawer is a form creation page, we close the drawer and want the content entered by the user in the form to be emptied to ensure that the user can re-create it the next time we enter. But the reality is that if we do not destroy the subcomponents in the drawer, the contents of the subcomponents will not be empty. The input before the user opens it next time, which is obviously unreasonable. As shown in the following figure:

To clear the cache, the first thing to do is to re-render the internal component, so we can control it through a state. If the user explicitly specifies that the component should be destroyed when it is closed, then we update the state so that the child element will not have a cache. The specific implementation is as follows:

Function Drawer (props) {/ /... Let [isDesChild, setIsDesChild] = useState (false) const handleClose = () = > {/ /. If (destroyOnClose) {setIsDesChild (true)}} useEffect (() = > {/ /... SetIsDesChild (false)}, [props.visible]) const childDom = ({setVisible () = > {if (getContainer! = = false & & props.visible) {getContainer.style.overflow = 'hidden'} return props.visible}) setIsDesChild (false)}, [props.visible, getContainer])

Restore the overflow of the logical parent when closed to avoid affecting the external style:

Const handleClose = () = > {onClose & & onClose () setVisible ((prev) = > {if (getContainer! = = false & & prev) {getContainer.style.overflow = 'auto'} return false}) if (destroyOnClose) {setIsDesChild (true)}} 2.5 implement placement

Placement is mainly used to control the pop-up direction of the drawer, which can pop up from the left or right, and the implementation process is relatively simple. We mainly need to have more attributes to dynamically modify the positioning properties. Here we will use the new features of es, the variable properties of objects. The core code is as follows:

In this way, no matter it is up and down, it can be realized perfectly.

2.6 robust support, we use the propTypes tool provided by react: import PropTypes from 'prop-types' / /. Drawer.propTypes = {visible: PropTypes.bool, closable: PropTypes.bool, destroyOnClose: PropTypes.bool, getContainer: PropTypes.element, maskClosable: PropTypes.bool, mask: PropTypes.bool, drawerStyle: PropTypes.object, width: PropTypes.oneOfType ([PropTypes.string, PropTypes.number]), zIndex: PropTypes.number, placement: PropTypes.string, onClose: PropTypes.func}

There are very detailed examples on the official website about the use of prop-types. Here is the use of oneOfType, which is used to support a component that may be one of many types. The component-related css code is as follows:

.xDrawerWrap {top: 0; height: 100vh; overflow: hidden; .xDrawerMask {position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba (0,0,0, .5);} .xDrawerContent {position: absolute; top: 0; padding: 16px; height: 100%; transition: all .3s; background-color: # fff Box-shadow: 00 20px rgba, .xCloseBtn {position: absolute; top: 10px; right: 10px; color: # ccc; cursor: pointer;}} "how to use React Portals to implement a powerful drawer component" is here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.