Почему (реагирующий) атрибут ref не работает, когда appendChild используется в svg? - PullRequest
Новая
       16

Почему (реагирующий) атрибут ref не работает, когда appendChild используется в svg?

0 голосов
/ 06 июня 2019

Я могу создать svg и все его дочерние компоненты (например, прямоугольник и т. Д.), Используя js в приложенииact.Однако я не могу дать атрибут ref для элемента.Если я вижу сгенерированный исходный код, его ref = [object Object], поэтому он не работает.Код вызывается в componentDidMount, после appendChild.Так что это должно работать, потому что оно уже отрисовано в DOM (не так ли?).ref отлично работает с элементами SVG (если не создан динамически).Может кто-нибудь направить меня в правильном направлении?

Даже используя функцию createElement React works: React.createElement ('rect', {key: "myKey", ширина: 100, высота: 100, ref: myRef}) Но он не создает реального DOM-узла, который можно использовать с функцией appendChild (об этом говорится в сообщении об ошибке).Так что я тоже не могу этим пользоваться.clipPathRef.current возвращает содержащий элемент clipPath, который работает, конечно.Прямоугольный элемент создан и визуализирован, просто у него нет правильной ссылки. 

const myRef = React.createRef(); 
    const newElement = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
        newElement.setAttribute("width", 100);
        newElement.setAttribute("height", 100);
        clipPathRef.current.appendChild(newElement);

        newElement.setAttribute("ref", myRef);

        console.log(myRef);//outputs [current null]

1 Ответ

0 голосов
/ 06 июня 2019

Это (newElement.setAttribute("ref", myRef)) не работает, потому что React никогда не назначает опору ref в качестве атрибута html. React отфильтровывает его из реквизита и управляет им самостоятельно, когда компонент монтируется, обновляется или отключается.

Глядя на ваш пример кода, вам не нужно использовать ref, если вы всегда создаете элемент <rect>. Переменная, в которую вы помещаете свой недавно созданный элемент (например, newElement), в основном такая же, как ссылка, но не ограничена атрибутом current.

...