对React子组件中父HTML元素的引用

Question

A simple Editor.jsx component render method that renders a SVG element and a child component called <SystemBox />

render() {
 return (
  <svg id="editor">
    <SystemBox />
  </svg>
 );
}

In SystemBox.jsx I need access to the actuall SVG html element to for example get to the getScreenCTM() method on the SVG element.

How do I pass a reference to the SVG element in the parent to the child component?

I guess I could use document.getElementById('editor') in the SystemBox.jsx child component, but that doesn't right.

Answer 1

Take a look at refs . You can create a reference to your svg DOM element and pass this reference by props to any custom component you've created.