Reactjs에서 코드 생성 SVG를 렌더링하는 방법은 무엇입니까?

React에서 렌더링하려고하는 코드로 SVG 사각형을 만들었습니다. dangerouslySetInnerHTML을 비롯한 여러 가지 방법을 시도했지만 성공하지 못했습니다.Reactjs에서 코드 생성 SVG를 렌더링하는 방법은 무엇입니까?

아래 예제에서 'return t'가 작동하고 'return svgRectElement'는 작동하지 않습니다.

svgRectElement에서 생성 한 svg를 어떻게 반환 할 수 있습니까? 감사!

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-wraping-dom-libs.md –

감사합니다 Andy. 아래의 Scarysize에 말했듯이, 내가하고 싶은 것은 동적 속성 (x, y 등)을 가진 SnapSvg로 내 svg를 생성 한 다음 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, 너비, 높이 등은 동적 속성입니다. 그래서 저는 svg 구성 요소 (각 노드)를 Snap을 사용하여 작성하려고합니다. 예 : Snap.rect (x, y, ...). 설명대로 계속 접근 하시겠습니까? –

직접 SnapSvg를 사용하지 않았지만 문서에서 다음을 수행했습니다. 구성 요소에 빈 ' Scarysize

주셔서 감사합니다. 그것을 시도하고 내 결과로 돌아올거야. –

Reactjs에서 코드 생성 SVG를 렌더링하는 방법은 무엇입니까?

답변

관련 문제