项目地址: react-draggable-layer
技术博客: https://www.linxiangjun.com
前言
2019 年以来, 越来越多的公司与项目都选择使用强类型语言 TypeScript 作为主要语言, 可以预见的是 2020 年 TypeScript 将成为前端开发所需要具备的能力之一.
目前前端工程师使用最多的无疑问是微软开源的 VSCode, 它本身提供的功能并不多, 但是通过支持插件的方式使得其具备了 IDE 的强大能力. 同时, VSCode 是使用 TypeScript 基于 Eletron 开发的, 使得它对于 TypeScript 的支持非常的强大. 如果你使用的编辑器是 VSCode, 那么项目中完全使用 TypeScript 编程将会大大的提高编程效率, 甚至使用一段时间后你会发现, 已经渐渐离不开 TypeScript.
应用新的语言还是语法都会面临着许多困难和陷阱, 这个时候如果能够参考一些现成的写法肯定会带来收益. 这也是我写这篇文章的初衷.
下面是 react-draggable-layer 使用到的一些技术细节:
- TypeScript
- React Hooks
- React Portals
- emotion
- Babel
实现
效果动画
Portals
实现一个弹层类组件, React 提供了 Portals 方法, 能够将子节点渲染到存在于父组件以外的 DOM 节点上. 我们先实现一个封装了 Portals 方法的通用组件:
- components/Portal.jsx
- import React, { useEffect, useRef } from "react";
- import ReactDOM from "react-dom";
- interface PortalProps {
- children: React.ReactElement;
- }
- const Portal: React.FC<PortalProps> = props => {
- // 使用 useRef 创建 ref 对象, 可以用来保存节点
- const { current: el } = useRef(document.createElement("div"));
- // 等同于类组件的 componentDidMount 方法
- useEffect(() => {
- const root = document.getElementById("root");
- if (root) {
- root.appendChild(el);
- }
- // 组件销毁后记得移除 div
- return () => {
- if (root) {
- root.removeChild(el);
- }
- };
- }, []);
- return ReactDOM.createPortal(props.children, el);
- };
- export default Portal;
- CSS-in-JS
有了 Portal 组件之后在可拖拽弹层组件中引入, 这样组件在使用时就可以挂载到 root 节点下. 在组件中样主要是以 CSS-in-JS 的方式来实现的, 它的优点有:
不需要引入 CSS 样式文件或者 CSS 预处理器
可避免因为样式名冲突带来的全局污染问题
不需要各种繁琐的命名规则
这并不是说它就没有缺点的, 同样的, 使用 CSS-in-JS 来开发会使得很多高阶 CSS 用法非常的复杂, 所以需要根据项目情况来辩证的思考与选择. 不过对于此项目来说 CSS-in-JS 就非常的合适, 它使得我们可以将更多的精力放在组件化上面. 另外这里推荐下 emotion 这个库.
React.FC
这里先来基于项目说一下 TypeScript 开发 React 函数式组件的规范:
- interface DraggableLayerProps {
- children?: React.ReactElement;
- titleName?: string;
- visible?: boolean;
- onClose?: () => void;
- }
- const DraggableLayer: React.FC<DraggableLayerProps> = props => <Component />
- export default DraggableLayer
使用函数式组件时需要将组件申明为 React.FC 类型, 也就是 Functional Component 的意思, 另外 props 需要申明各个参数的类型, 然后通过泛型传递给 React.FC.
draggable
可拖拽功能的实现是基于实时计算组件 x 轴与 y 轴的距离来实现的, 具体代码比较简洁:
- let initX = 0;
- let initY = 0;
- let isMouseDown = false;
- const handleMouseDown = (e: MouseEvent) => {
- isMouseDown = true;
- initX = e.offsetX;
- initY = e.offsetY;
- draggableRef.current.style.opacity = 0.5;
- };
- const handleMouseMove = (e: MouseEvent) => {
- if (isMouseDown) {
- const x = e.clientX - initX;
- const y = e.clientY - initY;
- draggableRef.current.style.left = `${x}px`;
- draggableRef.current.style.top = `${y}px`;
- }
- };
- const handleMouseUp = () => {
- isMouseDown = false;
- if (draggableRef && draggableRef.current) {
- draggableRef.current.style.opacity = 1;
- }
- };
稳健性
在组件获取 props 时有很多可选的参数, 比如 titleName, 因为使用了 TypeScript, 所以对可选参数进行赋值操作时提示错误信息, 这点在开发时能够有效的避免出错. 另外, 组件销毁后需要在 useEffect 的 return 回调函数中清除绑定的 event. 这些细节需要注意.
总结
非常欢迎尝试本项目, 可以直接使用 NPM install react-draggable-layer 来使用, 有好的建议也希望能够收到提交的 issues. 一些更加详细的使用说明在项目中的 README 文件中. 如果本文或者项目对你有帮助的话, 非常高兴您能够点下 star 支持.
来源: http://www.jianshu.com/p/0ed0cc6abe40