Dragula拖动不能很好地识别dropzones答案

【问题标题】：Dragula dragging not recognizing dropzones wellDragula拖动不能很好地识别dropzones
【发布时间】：2018-09-28 03:34:28
【问题描述】：

我正在制作一个拖放式 trello-esque 板进行练习，我在获取数据以将卡片的名称和数量提供给我的列时遇到了问题。我有一个正在调用的反应组件

this.props.getData()

在其内

componentDidMount()

功能。 Dragula 无法正常工作，每次拖动时，我都需要花费大量的悬停时间并将可拖动卡片稍微甩动一下，然后才能将该位置识别为可用的放置区。为什么会这样？我正在使用

https://codepen.io/anon/pen/KxYEdy

作为一个例子，从那里获取了所有的 CSS，以及大部分的 HTML，但它仍然会发生。

【问题讨论】：

标签： reactjs redux dragula

【解决方案1】：

我现在知道为什么会这样了！经过几个小时的搜索，我找到了答案。同一个组件中的这个数据调用，首先是不好的做法，其次，它会导致拖拽不像你想要的那样流畅和友好。把这些行注释掉，你就完成了！

开个玩笑。

仍然获得这些数据并让你的 Dragula 更加流畅的方法是在 React 中采用一种称为 Container vs. Presentational Components 的设计理念。我通过这篇文章了解到这一点：https://css-tricks.com/learning-react-container-components/

它几乎说将您的组件分离为父组件，这些组件获取数据并确保其正确，以及处理事件，然后让子组件基本上成为数据驱动组件的“外观”。这对我有用。别忘了把

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} />;
    }
}

演示组件非常简单

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

如果其他人遇到过此问题并对此有所帮助，请告诉我！

【讨论】：