インラインSVGにアクセス

Question

文字列からSVGを読み込み、dangerouslySetInnerHTMLを使用して表示しています。それは正常に動作しますが、解決できない問題が1つあります。

SVGには<g>が含まれており、Reactによって処理されるクリックハンドラを追加する必要があります。

SVGはReactによって構築されていないので、グループにクリックハンドラを追加する方法が見つかりませんでした。

Answer 1

findDOMNodeのcomponentDidMountを使用してDOM要素にアクセスできます。

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