Reactjs 无法拖动React引导选项卡-React漂亮dnd

我想从react引导中拖动下拉标签，我正在使用react Beauty dnd来实现它。但由于某种原因，我无法得到它。没有显示任何选项卡

这是我的密码：

import React from "react";
import { Tabs, Tab } from "react-bootstrap";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

export default function App() {
  const getItems = count =>
    Array.from({ length: count }, (v, k) => k).map(k => ({
      id: `item-${k}`,
      content: `item ${k}`
    }));
  const [selectedTab, setSelectedTab] = React.useState("item-0");
  const [items, setItems] = React.useState(getItems(6));

  const reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);

    return result;
  };

  const onDragEnd = result => {
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    const items = reorder(
      this.state.items,
      result.source.index,
      result.destination.index
    );

    setItems(items);
  };

  return (
    <div className="App">
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="tab-drop" direction="horizontal">
          {droppable => (
            <React.Fragment>
              <Tabs
                ref={droppable.innerRef}
                activeKey={selectedTab}
                onSelect={chartId => {
                  if (chartId === this.state.selectedTab) {
                    return;
                  }
                  setSelectedTab(chartId);
                }}
                {...droppable.droppableProps}
              >
                {items.map((item, index) => (
                  <Draggable
                    key={`tab-${item.id}-order-${index}`}
                    draggableId={`${item.id}-order-${index}`}
                    index={index}
                  >
                    {(draggable, snapshot) => (
                      <Tab
                        ref={draggable.innerRef}
                        eventKey={item.id}
                        title={<div>{item.content}</div>}
                        {...draggable.draggableProps}
                        {...draggable.dragHandleProps}
                        style={getItemStyle(
                          draggable.draggableProps.style,
                          snapshot.isDragging
                        )}
                      />
                    )}
                  </Draggable>
                ))}
                <Tab title={<button>+</button>} />
                <Tab
                  tabClassName="ml-auto active tabBottomBorder"
                  title={<button>Format</button>}
                />
                <Tab
                  tabClassName="active tabBottomBorder"
                  title={<button>Edit</button>}
                />
              </Tabs>
              {droppable.placeholder}
            </React.Fragment>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
}

从“React”导入React；
从“react bootstrap”导入{Tabs，Tab}；
从“dnd”导入{DragDropContext，dropable，Draggable}；
导出默认函数App（）{
const getItems=count=>
从（{length:count}，（v，k）=>k）.map（k=>({
id:`item-${k}`，
内容：`项目${k}`
}));
常量[selectedTab，setSelectedTab]=React.useState（“项-0”）；
const[items，setItems]=React.useState（getItems（6））；
常量重新排序=（列表、开始索引、结束索引）=>{
const result=Array.from（列表）；
常数[移除]=结果拼接（起始索引，1）；
结果：拼接（末端索引，0，移除）；
返回结果；
};
const onDragEnd=结果=>{
//被排除在名单之外
如果（！result.destination）{
返回；
}
常量项=重新排序(
此.state.items，
result.source.index，
result.destination.index
);
设置项目（项目）；
};
返回(
{可拖放=>(
{
if（chartId==此.state.selectedTab）{
返回；
}
设置选定选项卡（图表ID）；
}}
{…可拖放的。可拖放的}
>
{items.map（（项，索引）=>(
{（可拖动，快照）=>(
)}
))}
{dropable.placeholder}
)}
);
}

这是一个不使用DND的示例：

import React from "react";
import "./styles.css";
import { Tabs, Tab } from "react-bootstrap";

export default function App() {
  const getItems = (count) =>
    Array.from({ length: count }, (v, k) => k).map((k) => ({
      id: `item-${k}`,
      content: `item ${k}`
    }));
  const items = getItems(6);
  const [selectedTab, setSelectedTab] = React.useState("item-0");

  return (
    <div className="App">
      <Tabs
        activeKey={selectedTab}
        onSelect={(chartId) => {
          if (chartId === selectedTab) {
            return;
          }
          setSelectedTab(chartId);
        }}
      >
        {items.map((item, index) => (
          <Tab eventKey={item.id} title={<div>{item.content}</div>} />
        ))}
        <Tab title={<button>+</button>} />
        <Tab
          tabClassName="ml-auto active tabBottomBorder"
          title={<button>Format</button>}
        />
        <Tab
          tabClassName="active tabBottomBorder"
          title={<button>Edit</button>}
        />
      </Tabs>
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
从“react bootstrap”导入{Tabs，Tab}；
导出默认函数App（）{
常量getItems=（计数）=>
数组.from（{length:count}，（v，k）=>k）.map（（k）=>({
id:`item-${k}`，
内容：`项目${k}`
}));
const items=getItems（6）；
常量[selectedTab，setSelectedTab]=React.useState（“项-0”）；
返回(
{
如果（chartId==selectedTab）{
返回；
}
设置选定选项卡（图表ID）；
}}
>
{items.map（（项，索引）=>(
))}
);
}

与DND的链接：

不带DND的链接：

我希望实现与以下类似的功能：

请注意，只能拖动“+”按钮前的选项卡。不应使用+按钮选项卡和最后两个选项卡

请给出解决方法的建议。感谢您的帮助