Как визуализировать сгенерированный кодом SVG в Reactjs?

Я создал прямоугольник SVG по коду, который я пытаюсь сделать в React. Я пробовал разные вещи, в том числе опасноSetInnerHTML, без успеха.Как визуализировать сгенерированный кодом SVG в Reactjs?

В приведенном ниже примере «return t» работает, «return svgRectElement» не работает.

Как я могу вернуть svg, сгенерированный svgRectElement? Благодаря!

public render() { 
    let svgRectElement: SVGRectElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 
    svgRectElement.setAttributeNS(null, 'width', "300"); 
    svgRectElement.setAttributeNS(null, 'height', "300"); 
    svgRectElement.setAttributeNS(null, 'id', "myrect");   

    var t: JSX.Element = <rect width="300" height="100" id="myrect"></rect>; 

    return t; 
}

источник

2016-10-02 Greg Forel

Не создавайте узлы DOM в вашей функции рендеринга. Это не так, как реагирует. Если вам нужно обойти React, создайте его в функции componentDidMount и прикрепите его к чему-то, возвращаемому вашей функцией рендеринга. Дальнейшее чтение https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md –

Спасибо Энди. Как я сказал Scarysize ниже, я хочу создать svg с помощью SnapSvg с динамическими атрибутами (x, y и т. Д.), А затем визуализировать с помощью React. Думаю, вы и он предложили такое же техническое решение. –

Я не знаю, как вы создаете SVG элемент и как, какие переменные необходимы для создания, но прямой путь будет просто обернуть его в компонент:

const MySvg = props => <svg xmlns="http://www.w3.org/2000/svg">...</svg>;

Если у него есть некоторые динамические свойства (например, стиль, имена классов и т. Д.), Вы можете рассчитать их из заданных реквизитов.

источник

2016-10-02 09:37:50 Scarysize

Спасибо за ваши ответы (@AndyRay). В конечном счете, у меня есть график узлов, которые я хочу отобразить, используя библиотеку SnapSvg, и да, x, y, width, height и more будут динамическими свойствами. Таким образом, я намерен создать свои svg-компоненты (каждый узел) с помощью Snap, не записывая сам svg, например: Snap.rect (x, y, ...). Не могли бы вы поступить так, как вы описали? –

Не использовали SnapSvg самостоятельно, но из документов я бы сделал следующее: У компонента визуализировать пустой тег ' Scarysize

Спасибо за рекомендацию. Я попробую это и вернусь с моими результатами –

Как визуализировать сгенерированный кодом SVG в Reactjs?

ответ

Смежные вопросы