Как использовать Leader-Line (внешнюю библиотеку JavaScript) в реагировать?

Question

Я хочу использовать лидерскую линию в своем веб-проекте React.Это внешняя библиотека javascript, но я не знаю, как интегрировать ее в проект с синтаксисом JSX.
Например, его документация сообщает нам общую реализацию:

Html

<div id="start">start</div>
<div id="end">end</div>

Javascript

// Add new leader line from `start` to `end` (HTML/SVG elements, basically).
new LeaderLine(
  document.getElementById('start'),
  document.getElementById('end')
);

Как мне писать в JSX-файл?
Я пытаюсь написать ниже, но не получилось.

import React, { Component } from 'react';
import LeaderLine from 'leader-line'

class Page extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    new LeaderLine(document.getElementById('start'),
                   document.getElementById('end'));
  }

  render() {
    return (
      <div className="Page">
        <div id="start"></div>
        <div id="end"></div>
      </div>
    )
  }
}

export default Page;

Это страница пакета npm для лидера.

Answer 1

Я сделал небольшой прототип, чтобы проиллюстрировать, как его можно достичь.

class Line extends React.Component {

  componentDidMount () {
     this.waitWhenRefIsReady();
    // scroll and resize listeners could be assigned here
  }

  componentWillUnmount () {
    if(this.timer) {
      clearInterval(this.timer);
    }
  }

  shouldComponentUpdate () {
    setTimeout(() => {
      // skip current even loop and wait
      // the end of parent's render call
      if(this.line) {
        this.line.position();
      }
    }, 0);
    // you should disable react render at all
    return false;
  }

  waitWhenRefIsReady () {
    // refs are generated via mutations - wait for them
    this.timer = setInterval(() => {
      if(this.props.start.current) {
        clearInterval(this.timer);
        this.drawLine();
      }
    }, 5);
  }

  drawLine () {
    const {start, end} = this.props;
    this.line = new LeaderLine(start.current, end.current);
  }

  render () {
    return null;
  }
}

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      left: 0,
    };

    this.myRef1 = React.createRef();
    this.myRef2 = React.createRef();
  }

  componentDidMount() {
    this.animateLine();
  }

  animateLine() {
    setInterval(() => {
      const limit = 200;
      const {left} = this.state;
      const x = ((left % limit) + limit) % limit;
      this.setState({left: x + 10});
    }, 1000);
  }

  render () {
    const {left} = this.state;
    const {myRef1, myRef2} = this;

    return <div className="container">
        <Line 
          start={this.myRef1} 
          end={this.myRef2} />
        <div 
          id="start"
          ref={this.myRef1}
          style={{
            left: `${left}px`
          }}></div>
        <div
          id="end"
          ref={this.myRef2}></div>
      </div>
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Leader Line + React JSX простой прототип