인라인 SVG에 액세스

Question

문자열에서 SVG를 읽은 다음 dangerouslySetInnerHTML을 사용하여 표시합니다. 괜찮 으면 좋겠지 만 해결할 수없는 한 가지가 있습니다.

SVG에는 <g>이 포함되어 있으며 React에서 처리해야하는 클릭 핸들러를 추가해야합니다.

SVG가 React에 의해 생성되지 않았기 때문에 클릭 핸들러를 그룹에 추가하는 방법을 찾지 못했습니다.

아이디어가 있으십니까?

Answer 1

componentDidMount 안에 findDOMNode을 사용하여 DOM 요소에 액세스 할 수 있습니다.

componentDidMount() { 
    const nodeList = ReactDOM.findDOMNode(this).getElementsByTagName('g') 
    // Do things with nodeList here, e.g. map over and attach click event 
}