Javascript 很难让ReactBeautifulEnd和ReactTabs一起工作

我目前正在进行一个项目，我试图制作多个选项卡（代表不同的房间），其中有可拖动的对象，我需要能够在房间之间拖动这些对象。 所有东西都在dragdropcontext中，每个房间中都有一堆可拖放的区域

当我试图将任何拖拽物拖到另一个房间时，会出现两个问题。 我有两个问题，第一个是最大的问题，所以我将主要关注这一点

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

警告1：

警告2：

警告3：

两个错误：

我相信出现问题是因为房间选项卡在未选中时会显示“display:none”，但我不完全确定，也不知道如何修复它，因为我是一个新手

第二个问题是，我希望我的选项卡必须被单击才能更改，直到您开始拖动，然后您应该能够将鼠标悬停在选项卡上以选择它们。我还没有找到任何文档来帮助我判断用户是否在拖动，因此我花了很多时间做了一个非常糟糕的修复，这使得所有的标签在悬停时都会永久性地改变

任何帮助都是非常感谢的，因为我真的觉得我可能应该能够做这些事情，我只是被我仍然不完全理解和反应，并且没有足够的经验这一事实所束缚

我不确定要发布什么代码，因此下面是我代码中最相关的3部分（sry，这是一个代码转储，但我不知道哪些部分很重要）

主文件：

this.setState（{tabIndex:index}）}>
{this.state.history[this.state.stepNumber].workers.map（（诊所，索引）=>(
此.CreateClinics（索引）
))}
{this.state.history[this.state.stepNumber].workers.map（（诊所，索引）=>(
this.CreateTabPanel（诊所，索引）
))}

辅助文件：

---

Css文件：

我还没有检查代码，但是从第一个警告来看，您正在更改可拖放对象的id，这就是为什么以后找不到它的原因

<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>