Перетаскивание Dragula не распознает дропзоны хорошо - PullRequest
Новая
       11

Перетаскивание Dragula не распознает дропзоны хорошо

0 голосов
/ 28 сентября 2018

Я делаю для перетаскивания доску в стиле trello-esque, у меня возникает проблема с получением данных для ввода имен и количества карточек в мои столбцы.У меня есть компонент реагирования, который вызывает 

this.props.getData()

в рамках своей функции 

componentDidMount()

.Драгула не работает должным образом, и каждый раз, когда я перетаскиваю, мне нужно много времени зависать и немного трепать перетаскиваемую карту, прежде чем она распознает эту точку как доступную зону сброса.Почему это происходит?Я использую

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

в качестве примера и взял весь CSS оттуда, а также большую часть HTML, но это все еще происходит.

1 Ответ

0 голосов
/ 28 сентября 2018

Теперь я точно знаю, почему это происходит!После нескольких часов поисков я нашел ответ.Этот вызов данных внутри одного и того же компонента, во-первых, является плохой практикой, а во-вторых, он приводит к тому, что перетаскивание не будет таким плавным и дружественным, как хотелось бы.Прокомментируйте эти строки, и все готово!

Шучу.

Чтобы по-прежнему получать эти данные и сохранять плавность движения, нужно использовать в React идеологию дизайна, называемую Container vs. Презентационные компоненты.Я узнал об этом из этой статьи: https://css -tricks.com / learning-response-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>
  }
}

Если у кого-то еще возникла эта проблема, и это помогло, дайте мне знать!

...