一个可拖拽顺序，可添加可删除的React标签组件

以下是一个简化的React标签组件，它支持拖拽来重新排序标签，并且可以添加和删除标签。

import React, { useState } from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { Button, Tag } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
const TagList = ({ tags, setTags }) => {
  const [inputValue, setInputValue] = useState('');
 
  const moveTag = (dragIndex, hoverIndex) => {
    const dragTag = tags[dragIndex];
    setTags(tags.slice(0, dragIndex).concat(tags.slice(dragIndex + 1)).concat(dragTag));
  };
 
  const handleDragEnd = (result) => {
    if (!result.destination) return;
    moveTag(result.source.index, result.destination.index);
  };
 
  const addTag = () => {
    if (inputValue.trim()) {
      setTags([...tags, inputValue.trim()]);
      setInputValue('');
    }
  };
 
  const removeTag = (index) => {
    setTags(tags.filter((_, i) => i !== index));
  };
 
  return (
    <div>
      <DndProvider backend={HTML5Backend}>
        {tags.map((tag, index) => (
          <Tag key={tag} closable={true} onClose={() => removeTag(index)}>
            {tag}
          </Tag>
        ))}
      </DndProvider>
      <Input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Enter tag"
        style={{ width: 200, margin: '10px 0' }}
        suffix={
          <Button type="link" icon={<PlusOutlined />} onClick={addTag} disabled={!inputValue.trim()}>
            Add
          </Button>
        }
      />
    </div>
  );
};
 
export default TagList;

这段代码使用了react-dnd库来实现标签的拖拽功能，以及antd组件库中的Tag和Button组件。用户可以添加新标签，删除现有标签，并通过拖拽来重新排序标签列表。