Question

我正在制作一个类似trello的拖放式练习板，在获取数据以将名称和张数输入到我的列时遇到了一个问题。我有一个正在调用的React组件

this.props.getData()

在其

内

componentDidMount()

功能。 Dragula不能正常运行，并且每次拖动时，我都需要花费大量的悬停时间并使可拖动的卡晃动一下，然后才能将其识别为可用的拖放区。为什么会这样？我正在使用

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

作为示例，并从那里获取了所有CSS以及大部分HTML，但仍然会发生。

Answer 1

我现在确切知道为什么会这样！经过数小时的搜索，我找到了答案。首先，在同一组件内进行此数据调用是一种不好的做法，其次，这导致拖动不像您希望的那样流畅和友好。注释掉这些行，您就完成了！

开个玩笑。

仍然要获取这些数据并使您的变量更加平滑的方法是在React中采用一种称为容器与演示组件的设计思想。我通过这篇文章了解了这一点：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>
  }
}

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

Dragula拖动不能很好地识别下降区

1 个答案: