Как навести на дочерние элементы списка в React (и изменить родительское состояние), не замедляя все? - PullRequest
Новая
       9

Как навести на дочерние элементы списка в React (и изменить родительское состояние), не замедляя все?

0 голосов
/ 16 октября 2019

У меня есть список предметов, а затем контакты карты, которые соответствуют этим предметам. При наведении курсора в списке открывается значок карты. Так работают многие популярные карты. Пользователь наводит курсор на элемент списка, и карта меняет цвет, или открывается информационное окно. Возьмем, например, gmaps: enter image description here

Но способ, которым я сейчас использую эту настройку в React, просто не работает. Итак, у меня есть родительский список: 

    <div className={classes.parentList}>
  {filtereditems.map((item, index) => (
    <ShowCard
      key={index}
      item={item}
      setCardMarkerHover={this.setCardMarkerHover}
      resetCardMarkerHover={this.resetCardMarkerHover}
    />
  ))}
</div>;

Затем внутри своих элементов списка я вызываю функции поддержки следующим образом: 

onMouseEnter={e => props.setCardMarkerHover(item.node.id)}
onMouseLeave={e => props.resetCardMarkerHover()}

Эти функции setCardMarkerHover и resetCardMarkerHover вызывают setState, который затем перерисовывает все (!) так, что маркеры моей карты меняются. Информационное окно открывается на правом маркере.

Вот функции: 

  setCardMarkerHover = id => {
    this.setState({
      hoveredCardId: id,
    })
  }

  resetCardMarkerHover = () => {
    this.setState({
      hoveredCardId: "",
    })
  }

hoveredCardId затем передается на карту и маркеры (булавки), и они меняются в зависимости от того,этот маркер совпадает с тем же индексом / идентификатором для отслеживаемых элементов списка.

Проблема, как вы, вероятно, можете себе представить, заключается в том, что это действительно застревает в моем списке. Он больше не выполняет плавную прокрутку, потому что стольким частям DOM приходится перерисовывать / перерисовывать, когда мышь входит и выходит из различных элементов списка. overkill.

Каким еще способом можно было бы навести курсор на дочерний элемент списка и заставить его изменить что-то еще в другом дочернем компоненте, не вызывая слишком много перерисовок?

...