很难让 ReactBeautifulDnD 和 ReactTabs 一起工作

如何解决很难让 ReactBeautifulDnD 和 ReactTabs 一起工作

我目前正在做一个项目，我正在尝试制作多个选项卡（代表不同的房间），其中有可拖动的对象，我需要能够在房间之间拖动。一切都在一个拖放上下文中，每个房间都有一堆可放置的区域。

当我尝试将任何可拖动对象拖动到另一个房间时，会出现两个问题。我有两个问题，第一个是最大的，所以我将主要关注这个。

将可拖动对象拖动到另一个房间时，可拖动对象消失。我收到 3 个警告和 2 个错误：

警告 1：https://i.stack.imgur.com/lbsp6.png

警告 2：https://i.stack.imgur.com/hnpdZ.png

警告 3：https://i.stack.imgur.com/OnWyU.png

2 个错误：https://i.stack.imgur.com/06ta3.png

我认为出现问题是因为房间标签在未选中时会显示“display: none”，但我不完全确定，也不知道如何修复它，因为我对 React 非常陌生。

第二个问题是，我希望在开始拖动之前必须单击我的选项卡才能更改选项卡，然后您应该能够将鼠标悬停在它们上以选择它们。我找不到任何文档可以帮助我确定用户是否在拖动，因此我花了很多时间进行了一个非常糟糕的修复，这使得所有选项卡在悬停时永久更改。

非常感谢任何帮助，因为我真的觉得我可能应该能够做这些事情，而我只是因为我仍然不完全理解反应而感到沮丧，并且没有足够的体验。

我不确定要发布什么代码，所以这里是我的代码中最相关的 3 个部分（抱歉，这是一个代码转储，但我不知道哪些部分是重要的）

主文件：https://pastebin.com/g6uBSyn1

<Tabs className="Clinic-parent" selectedindex={this.state.tabIndex} selectedTabClassName="Clinic-tab-button-selected" onSelect={index => this.setState({tabIndex: index})}>
          <TabList className="Clinic-tab-button-list">
            {this.state.history[this.state.stepNumber].workers.map((clinic,index) => (
              this.CreateClinics(index)
            ))}
          </TabList>
          {this.state.history[this.state.stepNumber].workers.map((clinic,index) => (
            this.CreateTabPanel(clinic,index)
          ))}
        </Tabs>

辅助文件：https://pastebin.com/UddZzxV7

CSS 文件：https://pastebin.com/4y7XgYbQ