推荐一些好用的插件，可搭配react使用

最新推荐文章于 2025-03-20 11:16:53 发布

原创最新推荐文章于 2025-03-20 11:16:53 发布 · 827 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #reactjs

JS 专栏收录该内容

25 篇文章

订阅专栏

本文介绍react-sortable-hoc库的使用方法，实现元素的便捷拖拽排序，并演示了fileDialog封装函数用于图片上传的过程。同时，展示了moment库如何帮助格式化日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-sortable-hoc

作用：可以很简便地对元素进行拖拽
用法：

import { SortableContainer, SortableElement } from "react-sortable-hoc";
import arrayMove from "array-move";

const SortableList = SortableContainer(({ children }) => {
  return children;
});

const SortableItem = SortableElement(({ children }) => {
  return children;
});

		  <SortableList
            axis="y"
            lockAxis="y"
            distance={1}
            onSortEnd={({ oldIndex, newIndex }) => {
              setList(arrayMove(list, oldIndex, newIndex));
            }}
          >
          	<ul>
          		<SortableItem key={index} index={index}>
          		...
          		</SortableItem>
          	</ul>
          </SortableList>

fileDialog

作用：封装了图片上传的函数和回调
用法：

import fileDialog from "file-dialog";

fileDialog().then(file => {
    const data = new FormData();
    data.append("file", file[0]);
    data.append("imageName", "flower");
    // Post to server
  });

moment

作用：传入一个date，返回一定格式的日期
用法：

import moment from "moment";

moment().format("YYYY-MM-DD HH:mm:ss")；//返回 2020-03-24 17:43:20  这种格式