react + svg について

Question

svg、reactともに初学者です。
以下のようなコードがあったとします。

class Component1 extends React.Component {
  render() {
    return(
     <div className="first" />
    );
  }
}
class Component2 extends React.Component {
  render() {
    return(
     <div className="second" />
    );
  }
}

class Container extends React.Component {
  render() {
    return(
     <div>
       <Component1 />
       <Component2 />
     </div>
    );
  }
}

ReactDOM.render(
  <Container />,
  document.getElementById('container')
);

このような場合に、.firstと.secondのdivをsvgで描画された線で結ぶようなことはできますでしょうか？

Answer 1

親コンポーネントであるContainerがComponent1, Component2 それぞれのx,y座標を持っていれば可能です．

class Container extends React.Component {
  constructor() {
      this.state = {
          x1: 0,
          y1: 0,
          x2: 100,
          y2: 100
      }
  }
  render() {
    const {x1, y1, x2, y2} = this.state;
    return(
     <div>
       <Component1 />
       <svg>
          <line x1={x1} y1={y1} x2={x2} y2={y2} style={{stroke: rgb(255,0,0), stroke-width: 2}} />
       </svg>
       <Component2 />
     </div>
    );
  }
}