Reactjs Dragula拖动无法很好地识别dropzones

我正在制作一个拖拽式trello风格的板进行练习，在获取数据将卡片的名称和数量输入到我的专栏时遇到了一个问题。我有一个正在调用的react组件

this.props.getData() 

在其范围内

componentDidMount() 

功能。dragula无法正常工作，每次拖动时，我都需要花费大量的悬停时间，并在可拖动的卡被识别为可用的dropzone之前将其甩一甩。为什么会发生这种情况？我正在使用

---

作为一个例子，我从那里得到了所有的CSS，以及大多数HTML，但它仍然发生。

我现在确切地知道为什么会发生这种情况！经过几个小时的搜索，我找到了答案。同一组件中的此数据调用，首先是不好的做法，其次是它导致阻力不如您希望的那么流畅和友好。把这些行注释掉，就完成了

只是开玩笑

要想获得这些数据，并让你的dragula变得更加流畅，方法是在React中采用一种称为容器与呈现组件的设计思想。我通过这篇文章了解到了这一点：

它相当于将您的组件划分为获取数据并确保其正确性的父组件，以及处理事件的子组件，然后让子组件基本上成为数据驱动组件的“外观”。这对我有用。别忘了把钥匙放好

dragula([arrayOfDivs])

在容器组件的componentDidMount（）中

例如，这里：

class DataContainer extends Component {
  constructor() {
    super();
    this.state = {
      data: null
    }
  }

  componentDidMount() {
    getData().then(data => this.setState({ data: data }));
  }

  render() {
    if(dataIsRight(this.state.data)) {
      return <PresentationalComponent data={data} />;
    }
}

类数据容器扩展组件{
构造函数（）{
超级（）；
此.state={
数据：空
}
}
componentDidMount（）{
然后（data=>this.setState（{data:data}））；
}
render（）{
if（dataIsRight（this.state.data））{
回来
}
}

而表现的部分将非常简单

class PresentationComponent extends Component {
  render() {
    <div> {this.props.data} </div>
  }
}

class PresentationComponent扩展组件{
render（）{
{this.props.data}
}
}

如果其他人有这个问题，这有帮助，让我知道