## 前言

最近项目有个新需求，需要把用户的头像水平排列并且重叠。本来以为挺麻烦的，刚开始还想着要用JS去计算每一个头像需要位移的距离。

其实这个需求只需要一行代码就能搞定。最终的效果图如下：

## 效果图

![](https://cdn.fmlg1688.cn/levenx-world/en2cRbwyfEUHZy2X.png)

## 实现方案

首先定义HTML代码结构

```ts
import React from "react";
import "./index.less";

const avatars = [
  "<https://upload.jianshu.io/users/upload_avatars/10174664/6edf3306-4758-4472-90b8-dfc214d6f028.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp>",
  "<https://upload.jianshu.io/users/upload_avatars/10174664/6edf3306-4758-4472-90b8-dfc214d6f028.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp>",
  "<https://upload.jianshu.io/users/upload_avatars/10174664/6edf3306-4758-4472-90b8-dfc214d6f028.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp>",
  "<https://upload.jianshu.io/users/upload_avatars/10174664/6edf3306-4758-4472-90b8-dfc214d6f028.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp>",
  "<https://upload.jianshu.io/users/upload_avatars/10174664/6edf3306-4758-4472-90b8-dfc214d6f028.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp>",
  "<https://upload.jianshu.io/users/upload_avatars/10174664/6edf3306-4758-4472-90b8-dfc214d6f028.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/80/h/80/format/webp>",
];

export default function AvatarPage() {
  return (
    <div className="avatar">
      {avatars.map((avatar) => {
        return <img className="avatar-item" src={avatar} alt="avatar" />;
      })}
    </div>
  );
}

```

### 1. 使用负边距

使用margin-left负值实现水平重叠的效果。除了第一个mage元素外都设置负边距。

```cs
.avatar {
  display: flex;
}

.avatar-item {
  height: 56px;
  width: 56px;
  border-radius: 100%;
  border: 4px solid #efefef;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
  &:not(:first-child) {
    // 只需要加这行代码就能搞定
    margin-left: -24px;
  }
}

```

### 2. 使用相对定位

使用相对定位实现，将每个头像相对于父容器进行定位，然后设置负的left值来实现水平重叠效果。

```css
.avatar {
  display: flex;
}

.avatar-item {
  height: 56px;
  width: 56px;
  border-radius: 100%;
  border: 4px solid #efefef;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
  // 父容器设置定位属性
	position: relative;
  z-index: 1;

  &:not(:first-child) {
    //子元素设置定位属性
		position: relative;
		left: -24px;
		z-index: 2;
  }
}

```

## 封装React组件

1. 定义组件的接口interface；

```css
interface AvatarGroupProps {
	avatars: Array<string>;
}
```

1. 定义React组件代码；

```css
import React from "react";
import "./index.less";

export default function AvatarGroup(props:AvatarGroupProps) {
const { avatars } = props;
  return (
    <div className="avatar">
      {avatars.map((avatar) => {
        return <img className="avatar-item" src={avatar} alt="avatar" />;
      })}
    </div>
  );
}

```

## 总结

合理利用CSS属性，实现DOM元素水平重叠效果，提高页面的交互性和用户体验。抽取React组件以达到最快的代码复用效果。


最近项目有个新需求，需要把用户的头像水平排列并且重叠。本来以为挺麻烦的，刚开始还想着要用JS去计算每一个头像需要位移的距离。其实这个需求只需要一行代码就能搞定。最终的效果图如下：效果图实现方案首先定义HTML代码结构importReactfrom"react";import"./index.less";constavatars=["&lt;https://upload.jianshu.io/u

基于React创建重叠头像组件，深入理解CSS重叠样式

# 前言

日历组件是常见的日期时间相关的组件，围绕日历组件设计师做出过各种尝试，展示的形式也是五花八门。但是对于前端开发者来讲，主要我们能够掌握核心思路，不管多么奇葩的设计我们都能够把它做出来。

本文将详细分析如何渲染一个简单的日历组件。

# 在线演示DEMO

[https://calendar.levenx.com/#/simple-calendar](https://calendar.levenx.com/#/simple-calendar)

# 实现步骤

## 计算每个月中具体包含的日期

因为日历需要把当前月的每一天都展示出来，展示的前提是我们能够知道当前月具体都有哪些日子。那么如何优雅的获取每个月所有的天呢？

为了能够更方便的操作时间，我们需要引入 `dayjs` 工具库，这也是我们手写日历组件唯一需要的工具库。

```json
npm install dayjs
```

接下来我们实现一个工具方法，方法的目的是当我们传入年、月，就会返回当前月份的所有天。

```json
import dayjs from "dayjs";

export const getDaysOfMonth = (year: number, month: number) => {
  const firstDayOfMonth = dayjs(`${year}-${month}-1`);
  const lastDayOfMonth = dayjs(`${year}-${month + 1}-1`).subtract(1, "day");
  const days = [];

  let tempDate = firstDayOfMonth;
  while (tempDate.isBefore(lastDayOfMonth) || tempDate.isSame(lastDayOfMonth)) {
    days.push(tempDate);
    tempDate = tempDate.add(1, "day");
  }

  return days;
};
```

我们输出一下2023-08有哪些日子,并且简单渲染出来看看效果

```json
function App() {
  const days = getDaysOfMonth(2023, 8);

	// 控制台打印
  days.forEach((day) => console.log(day.format("YYYY-MM-DD")));

  return (
    <div className="App">
      {days.map((day) => {
        return <div>
          {
            day.format('DD')
          }
        </div>;
      })}
    </div>
  );
}
```

![](https://cdn.portal.levenx.com/levenx-world/cfb50213b53940a2a6277e6e68db6538.png)![](https://cdn.portal.levenx.com/levenx-world/0bc7b7f292bf452fa4982e96d55bcabb.png)

## 以周为单位分组日期

1. 首先我们先计算出日历分组标题，也就是周一，周二 … 周日

```json
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");

const weekTitles = useMemo(() => {
    return [...Array(7)].map((_, weekInx) => {
      return dayjs().day(weekInx);
    });
  }, []);

// 日历标题渲染
<div className="calendar-title">
    {weekTitles.map((title) => {
         return <div>{title.format("ddd")}</div>;
    })}
</div>
```

1. 对于当月所有的日期，每7天一组进行分组，也就是共分成7列

```json
<div className="calendar-content">
    {days.map((day) => {
        return <div>{day.format("DD")}</div>;
    })}
</div>
```

1. 加上对应的样式

```json
.calendar {
  display: flex;
  flex-direction: column;
  width: 400px;
}

.calendar-title {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-bottom: 8px;
}

.calendar-content {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
```

1. 看看效果
   ![](https://cdn.portal.levenx.com/levenx-world/9a648e305c054fb8b394ce56107a040b.png)

猛的一看好像完成了，但是仔细检查会发现，2023年8月1号是周二，我们渲染出来的却是周日。这肯定是不对的，那么问题出在哪儿呢？

由于我们是通过grid布局来渲染日期数组，数组的第一位数据是8月1号，所以就成了上面图中的效果。所以我们得想办法将每个月1号前的日期也补全直到每周周日。

让我们改造一下获取日期的工具方法 `getDaysOfMonth`  ，下面代码是最终改造完成后的。

```json
export const getDaysOfMonth = (year: number, month: number) => {
  let firstDayOfMonth = dayjs(`${year}-${month}-1`);
  let lastDayOfMonth = dayjs(`${year}-${month + 1}-1`).subtract(1, "day");
  **// 开始补全第一天前的日期
  while (firstDayOfMonth.day() !== 0) {
    firstDayOfMonth = firstDayOfMonth.subtract(1, "day");
  }

  // 开始补全最后一天后的日期
  while (lastDayOfMonth.day() !== 6) {
    lastDayOfMonth = lastDayOfMonth.add(1, "day");
  }**

  const days = [];
  let tempDate = firstDayOfMonth;
  while (tempDate.isBefore(lastDayOfMonth) || tempDate.isSame(lastDayOfMonth)) {
    days.push(tempDate);
    tempDate = tempDate.add(1, "day");
  }

  return days;
};
```

![](https://cdn.portal.levenx.com/levenx-world/8a80a8df14b54a38bb9b3dcab3ced89b.png)

可以看出我们已经正确的渲染出了日历，只是样式看起来比较简陋。

## 日历支持切换月份

上面的结果是我固定渲染了2023年8月的日历，大多数的日历是需要支持月份切换的，甚至有的日历设计是需要支持用户上下滚动就能够显示对应的月份。我们先简单实现通过按钮点击支持日历月份的切换。

1. 显示当前月份（日历顶部显示档期月份）

```json
// tsx
<div className="calendar-month">
  <div className="calendar-month-switch">{"<"}</div>
  <div>{month.format("MMM YYYY")}</div>
  <div className="calendar-month-switch">{">"}</div>
</div>

// css
.calendar-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.calendar-month-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  cursor: pointer;
}
```

简单看看效果

![](https://cdn.portal.levenx.com/levenx-world/58f1d8d255bf4af29e18c58c3c292e3d.png)

2. 支持点击切换月份

从上图可以看到，月份两边有两个「箭头」按钮，接下来我们在这两个按钮上绑定事件，用来切换不同的月份

```json
// 切换月份事件，-1 代表前一个月，1代表后一个月
const onMonthSwitch = (action: number) => {
    setMonth((month) => {
      return month.add(action, "month");
    });
  };

<div className="calendar-month">
    <div className="calendar-month-switch" onClick={()=> onMonthSwitch(-1)}
        >
        {"<"} </div> <div>{month.format("MMM YYYY")}</div>
    <div className="calendar-month-switch" onClick={()=> onMonthSwitch(1)}
        >
        {">"}
    </div>
</div>
```

![](https://cdn.portal.levenx.com/levenx-world/d5a3671f3ae34e7e8ecec8f8af3b85c8.gif)

## 总结

本文详细的记录了一个最简单的日历组件的实现过程，感兴趣但是之前还没有实现过日历的同学可以直接下载代码试试，希望对大家有所启发。也可以直接访问[https://react-calendar-training.vercel.app/](https://react-calendar-training.vercel.app/)看成品效果。

由于设计师脑洞的千变万化，日历的展现形式也各不相同，后续我还将继续记录更多形式的日历实现过程，感兴趣的同学敬请期待。有任何问题请留言，如果对你有帮助，请帮忙点个赞🦉

## 相关链接

1. 源码

   [https://github.com/levenx/react-calendar-training](https://github.com/levenx/react-calendar-training)
2. 在线DEMO效果

   [https://react-calendar-training.vercel.app](https://react-calendar-training.vercel.app/)


日历组件是常见的日期时间相关的组件，围绕日历组件设计师做出过各种尝试，展示的形式也是五花八门。但是对于前端开发者来讲，主要我们能够掌握核心思路，不管多么奇葩的设计我们都能够把它做出来。本文将详细分析如何渲染一个简单的日历组件。在线演示DEMOhttps://calendar.levenx.com/#/simple-calendar实现步骤计算每个月中具体包含的日期因为日历需要把当前月的每一天都展 

【手写组件库之日历组件教程第一篇】基于React实现日历组件详细教程

# 前言

由于需要考虑后端接口的性能问题，我们在请求业务数据列表的时候并不能直接请求全量数据。所以我们在请求数据时常见的方式是做分页查询。

对于前端交互而言，我们需要考虑如何优雅的让用户触发请求下一页数据的接口。常用的方法有两种：1. 提供显示的分页器，让用户自己手动点击下一页；2. 业务滚动到某个阈值时自动触发下一页请求。

对于移动端，滚动加载的交互是更加优雅的处理方式。对于滚动加载的能力，我们需要一个公共的组件来实现代码的复用，避免每次都要为滚动加载的需求伤脑筋。

# 效果图

先看效果，增加信心

![Untitled](https://cdn.fmlg1688.cn/levenx-world/d619301b46b3430d837bae0c8b387753.gif)

![](https://cdn.fmlg1688.cn/levenx-world/030569ad662c49c08da2a56d453b0bcd.gif)

# 准备工作

滚动事件的参数中**核心属性**

| clientWidth  | 可视区宽度                 |
| ------------ | -------------------------- |
| clientHeight | 可视区高度                 |
| offsetWidth  | 可视区宽度                 |
| offsetHeight | 可视区高度                 |
| scrollWidth  | 内容实际宽度               |
| scrollHeight | 内容实际高度               |
| scrollTop    | 内容顶部距离可视区顶部距离 |
| scrollLeft   | 内容左侧距离可视图左侧距离 |

比较直观的示意图

![](https://cdn.fmlg1688.cn/levenx-world/43HKlg-q8mhczv1Y.png)

# 实现原理

滚动加载的目的是用户滚动页面到最底部时可以自动请求下一页的数据接口，所以问题重点是如何确认用户的页面滚动到了最底部。

**列表触底的条件：可视区高度 + 滚动距离 ≥ 内容实际高度**

**offsetHeight + scrollTop ≥ scrollHeight**

核心代码

```jsx
scrollEvent = async (e) => {
    let scrollHeight = e.target.scrollHeight;
    let scrollTop = e.target.scrollTop;
    let offsetHeight = e.target.offsetHeight;
    if (offsetHeight + scrollTop >= scrollHeight) {
      console.log('列表触底,触发接口请求数据');
      this.setState({ loading: true });
      let result = await this.loadData();
      this.setState({
        loading: false,
        list: this.state.list.concat(result),
      });
    }
  };

window.addListener('scroll',()=>scrollEvent())
```

## 组件封装

为了让代码能够更高的得到复用，将代码封装成UI组件是必要的，于是我封装了一个简易的React版的无限滚动组件。

组件能力介绍

* 业务方管理数据源dataSource，便于个性化业务操作；
* 支持自定义数据加载中skeleton；
* 增加触发门槛，减少无效的数据请求；

```js
import React, { ReactNode, useEffect, useRef } from 'react'
import classnames from 'classnames'

interface InfiniteScrollListProps<T> {
    loading: boolean
    dataSource: Array<T>
    renderItem: (data: T) => ReactNode
    renderSkeleton?: () => ReactNode
    hasMore: boolean
    loadMore: () => void
    className?: string
}

export default function InfiniteScrollList<T>(props: InfiniteScrollListProps<T>) {
    const { loading, dataSource, renderItem, renderSkeleton, loadMore, hasMore, className } = props

    const containerRef = useRef<HTMLDivElement>(null)

    useEffect(() => {
        const scrollEvent = (event) => {
            if (!hasMore || loading) return
            //可视区高度
            let scrollHeight = event.target?.scrollHeight
            //滚动高度
            let scrollTop = event.target.scrollTop
            //列表内容实际高度
            let offsetHeight = event.target.offsetHeight
            if (offsetHeight + scrollTop >= scrollHeight) {
                console.log('列表触底')
                loadMore()
            }
        }

        containerRef.current?.addEventListener('scroll', scrollEvent)

        return () => {
            containerRef.current?.removeEventListener('scroll', scrollEvent)
        }
    }, [hasMore, loading])

    return (
        <div className={classnames('flex-1 flex flex-col overflow-y-auto', className)} ref={containerRef}>
            {dataSource.map((data) => {
                return renderItem(data)
            })}
            {loading && new Array(4).fill(0).map(() => renderSkeleton?.())}
        </div>
    )
}
```

```

```


前言由于需要考虑后端接口的性能问题，我们在请求业务数据列表的时候并不能直接请求全量数据。所以我们在请求数据时常见的方式是做分页查询。对于前端交互而言，我们需要考虑如何优雅的让用户触发请求下一页数据的接口。常用的方法有两种：1.提供显示的分页器，让用户自己手动点击下一页；2.业务滚动到某个阈值时自动触发下一页请求。对于移动端，滚动加载的交互是更加优雅的处理方式。对于滚动加载的能力，我们需要一个公共的

如何封装React无限滚动加载列表组件【含源码】

## 前言

> 写项目时一直用的都是封装好的table组件，对其内在并未深入了解，自己手动封装一个简单的组件，加深对各类封装好的table组件的了解。接下来的内容都是类比于antd中的table组件

**注意：** 既然是封装表格，那么就需要使表格尽可能符合多种业务场景，下面我封装的表格只针对业务内容展示进行处理，并不针对样式，样式也可类比。

## 思考过程

**首先要思考table组件需要什么？？？**

1. 列数据（columns）- 即表头
2. 行数据（dataSource）- 每一行需要展示的内容

## 代码实现

**接下来进行封装**

```jsx
//APP.jsx
export default class App extends Component {
  render() {
  // 使用的是antd中所传数据格式
    const dataSource = [
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园2号',
      },
      {
        key: '3',
        name: '胡彦文',
        age: 52,
        address: '西湖区湖底公园3号',
      },
      {
        key: '4',
        name: '胡彦武',
        age: 62,
        address: '西湖区湖底公园4号',
      },
    ];

    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        render:(name, item)=>{
          return <p>{name + item.age}</p>
        }
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
    ];

    return (
      <TablePanel rowKey={'key'} dataSource={dataSource} columns={columns} />
    )
  }
}

```

```jsx
// TablePanel.jsx
export function TablePanel(props) {
  const { dataSource, columns,rowKey } = props
  return (
    <div style={{ margin: 'auto', width: '800px', position: 'absolute', top: '20%', left: '20%' }}>
      <h3>表格</h3>
      <table width="100%" border="1" cellSpacing="0" cellPadding="0"  align="center">
      // 展示表头数据
        <tr>
          {columns.map((item) => {
            return (<th key={item.key}>{item.title}</th>)
          })}
        </tr>
        // * 展示行数据
        {
          dataSource.map(data=>{
            return <tr key={data.key}>
              {
                columns.map(item=>{
                  const key = item[rowKey];
                  if(item.render){
                    return <td key={key}>{item.render(data[item.dataIndex],data)}</td>
                  }
                  return <td key={item.key}>{data[item.dataIndex]}</td>
                })
              }
            </tr>
          })
        }
      </table>
    </div>
  )
}

```

**可以看看效果图**

![Untitled](https://cdn.portal.levenx.com/levenx-world/8443374d5dc643b38facaa08d946e8ae.blob)

# 总结

> 主要难点在于如何处理行与列之间的数据关系。对dataSource循环遍历可以知道需要展示的行数，在此循环里加上对columns的循环遍历可以针对每一行 展示表头（即姓名、年龄、地址）对应的这一列数据。 这一点理解了，以后针对表格数据的处理思路会清晰很多。


写项目时一直用的都是封装好的table组件，对其内在并未深入了解，自己手动封装一个简单的组件，加深对各类封装好的table组件的了解。接下来的内容都是类比于antd中的table组件注意：既然是封装表格，那么就需要使表格尽可能符合多种业务场景，下面我封装的表格只针对业务内容展示进行处理，并不针对样式，样式也可类比。思考过程首先要思考table组件需要什么？？？列数据（columns）-即表头行

使用React封装简单table组件

## 背景

弹窗在现代应用中是最为常见的一种展示信息的形式，二次确认弹窗是其中最为经典的一种。当我们在React，Vue这种数据驱动视图的前端框架中渲染弹窗基本是固定的使用形式。

使用方式：创建新的弹窗组件，在需要弹窗的地方引用并且需要在外层维护弹窗组件的显示/隐藏状态。

这只是庞大项目中一处需要弹窗的地方，如果项目中存在N个需要弹窗的场景，我们都需要将上述步骤重复一次。这会让我们的项目组件变得臃肿冗余。这也是前端开发者比较头疼且常见的问题。那么我们有没有办法解决这种问题呢？

## 思考

在最近的一次需求中，我尝试去解决这个问题。首先对于二次确认弹窗这种只有在执行某些动作的时候才需要进行展示，其他时间我们应该忽视它的存在。很明显根据传统的做法我们至少需要维护一个组件实例以及一个状态。

是否可以实现只有在执行具体的动作时才调用二次确认弹窗相关的代码呢？就比如命令式调用方法去渲染组件，可以通过ReactDOM.render实现的这种效果。

接着尝试思考第二个问题，对于二次确认弹窗的交互，其实本质上我们只关心用户点击的取消还是确认。对于这种状态二选一的问题，我脑海里面浮现出熟悉的Promise。

于是，我尝试将二次确认弹窗与Promise进行有机结合，实现出命令式二次确认弹窗。当然这种思路可以运用到其他任何类似的场景。

## 在线演示Live Demo

> 事实胜于雄辩，这是下方代码实现的真实效果，感兴趣的同学可自行访问看看效果。

[Reconfirm odal - FE Component Training](https://www.notion.so/ca2689f740b946dc966a143009671150?pvs=21)

## 代码实现

### 普通方式实现

1. 先通过通用方式实现二次确认弹窗

   ```typescript
   import { ReactNode } from "react";
   import { Button } from "antd";
   import "./index.css";

   interface ModalOption {
     title: ReactNode;
     content: ReactNode;
     okText?: string;
     cancelText?: string;
   }

   interface ReconfirmModalProps {
     onConfirm: () => void;
     onClose: () => void;
     options: ModalOption;
   }

   function ReconfirmModal(props: ReconfirmModalProps) {
     const { onConfirm, onClose, options } = props;
     const { title, content, okText, cancelText } = options;
     return (
       <div className="reconfirm-modal" style={{ zIndex: 10001 }}>
         <div className="reconfirm-modal-body" style={{ width: 400 }}>
           <p className="reconfirm-modal-title">{title}</p>

           <p className="reconfirm-modal-content">{content}</p>

           <div className="reconfirm-modal-footer">
             <Button size="large" onClick={onClose} block>
               {cancelText || "取消"}
             </Button>
             <Button type="primary" size="large" block onClick={onConfirm}>
               {okText || "确认"}
             </Button>
           </div>
         </div>
       </div>
     );
   }
   ```
2. 引用二次确认弹窗，进行简单交互

   ```typescript
   export default function ReconfirmModalPage() {
     const [visible, setVisible] = useState(false);

     return (
       <div>
         <Button danger onClick={() => setVisible(true)}>
           删除
         </Button>
         {visible && (
           <ReconfirmModal
             onConfirm={() => {
               setVisible(false);
               alert("点击了确认按钮");
             }}
             onClose={() => {
               setVisible(false);
               alert("点击了取消按钮");
             }}
             options={{ title: "删除提示", content: "确认删除吗？" }}
           />
         )}
       </div>
     );
   }
   ```
3. 看看展示效果

   ![二次确认弹窗效果图](https://cdn.portal.levenx.com/levenx-world/d532acf3633c4fad8081f082a1a31605.gif)

### 有机结合Promise

> 我们需要梳理清晰我们的目的，然后再动手进行实现，通过理论指导实践。

首先创建一个方法，调用这个方法时唤醒二次确认弹窗，同时这个方法需要返回二次确认弹窗的交互结果。

通过ReactDOM.render方法将弹窗组件挂在到新创建的root节点上，将Promise的resolve方法传递给弹窗组件的两个按钮事件，此时用户点击按钮时即触发resove方法，Promise状态就从**pending**状态转移到**fulfilled**状态。

调用该方法的宿主方法即可得到用户点击二次确认弹窗的点击结果，我们的目的也就达到了。

```tsx
export const openReconfirmModal = (options: ModalOption) => {
    return new Promise((resolve) => {
        const root = document.createElement('div')
        document.body.appendChild(root)

				// 移除react组件和DOM节点
        const removeModal = () => {
            ReactDOM.unmountComponentAtNode(root)
            document.body.removeChild(root)
        }

				// 点击取消按钮
        const onClose = () => {
            removeModal()
            resolve(false)
        }

	      // 点击确认按钮
        const onConfirm = () => {
            removeModal()
            resolve(true)
        }

        ReactDOM.render(createElement(ReconfirmModal, { onClose, onConfirm, options }), root)
    })
}
```

调用二次确认弹窗方法

```json
function ReconfirmModalPage() {

  const handlePromseReconfirm = async () => {
		// !!! **直接这么调用就完事儿，简单直接**
    const res = await openReconfirmModal({
      title: "删除提示",
      content: "确认删除吗？",
    });
    if (res) {
      alert("点击了确认按钮");
    } else {
      alert("点击了取消按钮");
    }
  };

  return (
      <Button danger type="primary" onClick={handlePromseReconfirm}>
        Promise模式删除
      </Button>
  );
}
```

### 缺点分析

因为我们是通过ReactDOM.render方法渲染的弹窗，这就意味着弹窗组件跟主应用App的状态是隔离的，如果弹窗中用到Redux这种需要上下文Provider能力的工具，就需要在弹窗组件中也初始化一次。但是对于像二次确认弹窗这种简单的纯展示的组件，结合Promise的方式是完全可行的。

## 总结

日常开发工作中总有一些能够优化的步骤和流程，我们能够多思考一下，转变思路，就能够让我们的代码更加赏心悦目。


弹窗在现代应用中是最为常见的一种展示信息的形式，二次确认弹窗是其中最为经典的一种。当我们在React，Vue这种数据驱动视图的前端框架中渲染弹窗基本是固定的使用形式。使用方式：创建新的弹窗组件，在需要弹窗的地方引用并且需要在外层维护弹窗组件的显示/隐藏状态。这只是庞大项目中一处需要弹窗的地方，如果项目中存在N个需要弹窗的场景，我们都需要将上述步骤重复一次。这会让我们的项目组件变得臃肿冗余。

基于React实现：弹窗组件与Promise的有机结合

## 背景

在标签功能中，由于有「背景色」属性，每次新增标签时都为选择哪种颜色犯难。因此，我们思考如何通过JS代码**生成随机颜色**，提取一个通用的随机颜色生成工具，并基于React框架封装随机颜色选择器组件。

## 实际效果

![](https://cdn.fmlg1688.cn/levenx-world/BG_WGIibigDt0yjx.gif)

## 原理与思路

作为前端开发人员，我们知道HTML接受 RGB、HEX、HSL三种格式的颜色。虽然是不同的格式，但是它们的本质都是**通过数字表达出颜色。**

因为RGB、HEX、HSL 本身都是数字，那么通过生成随机数并组装成符合格式要求的数字，也就达到预期**随机生成颜色**的想法。

下面分别列举RGB和HEX格式的**随机颜色生成思路**

* 以RGB格式为例，rbg(0,0,0)代表黑色，rbg(255,255,255)代表白色。所以我们通过JS的**Math.random**方法随机生成3个0～255之间的随机数，并且取整，将生成的三个随机数进行字符串拼接即可得到一个RGB格式的颜色。
* 以HEX格式为例，#000000代表黑色， #FFFFFF代表白色。可以发现hex格式通常都是6位16进制的数字，每两位16进制数字分为一组，比如1～2位代表red，3～4代表blue，5～6代表green。同样的道理，通过**Math.random**方法随机生成3个0～255之间的随机数，通过JS的toString(16)方法将10进制随机数转化成16进制格式，最后通过字符串拼接得到HEX格式的颜色。

## 核心代码

* RBG格式随机颜色生成方法
  ```jsx
  export function getRandomRGBColor(limit: number = 256) {
    //十六进制颜色随机
    const r = Math.floor(Math.random() * limit);
    const g = Math.floor(Math.random() * limit);
    const b = Math.floor(Math.random() * limit);

    const color = `rgb(${r},${g},${b})`;
    return color;
  }
  ```
* HEX格式随机颜色生成方法
  ```jsx
  export function getRandomHEXColor(limit: number = 256) {
    const getRandomHexNumber = (limit: number): string => {
      let randomNum = Math.floor(Math.random() * limit).toString(16);
      if (randomNum.length < 2) {
        randomNum = "0" + randomNum;
      }
      return randomNum;
    };

    //十六进制颜色随机
    const r = getRandomHexNumber(limit);
    const g = getRandomHexNumber(limit);
    const b = getRandomHexNumber(limit);

    const color = `#${r}${g}${b}`;
    return color;
  }
  ```

## React组件

这是标签背景随机颜色选择器的React组件代码，实现是非常简单的，可以直接复制使用。

实际运行效果可以看本文最开始的「实际效果」截图。对于标签功能，感兴趣的可以访问

[标签 - 乐闻世界](https://www.levenx.com/tags)



```typescript
import { useMemo, useState } from "react";
import { getRandomColor } from "@/utils/color";
import classnames from "classnames";
import { Check, Refresh } from "@icon-park/react";
import { nanoid } from "nanoid";

interface ColorSelectProps {
  defaultValue: string;
  value?: string;
  onChange?: (value: string) => void;
}

export default function ColorSelect(props: ColorSelectProps) {
  const { defaultValue, value, onChange } = props;

  // 用于重新生成颜色
  const [randomId, setRandomId] = useState("");

  const colors = useMemo(() => {
    // 随机生成6个颜色
    return new Array(6).fill(0).map(() => getRandomColor());
  }, [randomId]);

  const targetColors = useMemo(() => {
    // 过滤是否存在默认值的情况
    return [...colors, defaultValue || ""].filter(
      v => !!v && !["#"].includes(v),
    );
  }, [defaultValue, colors]);

  return (
    <div className="flex gap-2">
      {targetColors.map(color => {
        console.log("color--->", color);
        return (
          <div
            key={color}
            data-color={color}
            onClick={() => onChange?.(color)}
            className={classnames(
              "h-8 w-8 cursor-pointer flex justify-center items-center",
            )}
            style={{ backgroundColor: color }}>
            {value === color && (
              <Check theme="multi-color" size="24" fill="#fff" />
            )}
          </div>
        );
      })}
      <div
        className="h-8 w-8 cursor-pointer flex justify-center items-center border border-solid border-color-BGBrown text-color-BGBrown text-P4-Regular"
        onClick={() => setRandomId(nanoid())}>
        <Refresh theme="outline" size="18" fill="#333" />
      </div>
    </div>
  );
}
```


在标签功能中，由于有「背景色」属性，每次新增标签时都为选择哪种颜色犯难。因此，我们思考如何通过JS代码生成随机颜色，提取一个通用的随机颜色生成工具，并基于React框架封装随机颜色选择器组件。实际效果原理与思路作为前端开发人员，我们知道HTML接受RGB、HEX、HSL三种格式的颜色。虽然是不同的格式，但是它们的本质都是通过数字表达出颜色。因为RGB、HEX、HSL本身都是数字，那么通过生成