Несовместимость ввода между useRef () и d3.drag () в React-native - PullRequest
Новая
       101

Несовместимость ввода между useRef () и d3.drag () в React-native

0 голосов
/ 03 августа 2020

У меня странная проблема с набором текста, которая сводила меня с ума последние два дня. Надеюсь, вы сможете сохранить мое здравомыслие: D!

Стек: react-native (ориентированный на функциональные компоненты) + задействованные библиотеки машинописного текста: react-native-svg, d3

Я хотел бы создать Компонент "DraggableCircle", расширяющий Component Circle от react-native-svg. Я решил использовать d3 вместо PanResponder, потому что я уже немного знал о библиотеке.

Вот мой код: 

import React, { useEffect, useRef, Component } from 'react';
import { Circle, CircleProps } from 'react-native-svg';
import * as d3 from 'd3';

type IProps = CircleProps;

const DraggableCircle: React.FC<IProps> = (props: IProps) => {
  const circleRef = useRef(null);
  useEffect(() => {
    if (circleRef.current) {
      const circle = d3.select(circleRef.current);
      circle.call(
        d3.drag().on('start', () => {
          console.log('ok');
        }),
      );
    }
  }, [circleRef]);

  return <Circle {...props} ref={circleRef} />;
};

export default DraggableCircle;

Что я вижу: Снимок экрана с ошибкой

Я использую eslint, который позволяет мне обнаруживать ошибки. Eslint указывает на ошибку в d3.drag (): Type 'Selection 'не назначается типу' Выбор '.

Итак, я понимаю, что мне нужно ввести useRef (), чтобы он рассматривал элемент, на который будет ссылаться не значение null, а как элемент.

Что я пробовал: const circleRef = useRef<SVGCircleElement>(null); const circleRef = useRef<CircleProps>(null); const circleRef = useRef<Element>(null);

С каждым из этих трех типов у меня больше нет ошибок в d3.drag (). С другой стороны, у меня появилась новая ошибка ввода ref = {circleRef}: тип RefObject не может быть назначен типу RefObject. >> '.

То, что я пробовал: const circleRef = useRef<Component<CircleProps>>(null);

Это устраняет ошибку в ссылке, но я сразу нахожу ошибку в d3.drag () (что имеет смысл мне ...) Итак, у меня сложилось впечатление, что типы, ожидаемые d3.drag () и ref, несовместимы. После долгих поисков я не нашел никакой помощи в этом смысле. Кажется, у большинства людей этой проблемы нет.

Есть идеи? => Если у вас есть совершенно другое решение для создания перетаскиваемого элемента, меня тоже заинтересует, даже если я бы не хотел обращаться к PanResponder, что, кажется, непросто понять.

Заранее спасибо.

...