如何在React中使用leader-line（外部JavaScript库）？

Question

我想在我的 React Web 项目中使用引导线。它是一个外部javascript库，但我不知道如何使用JSX语法将其集成到项目中。
例如，它的文档告诉我们一般的实现：

网页

<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;

这是leader-line的npm包页面。

Answer 1

根据您尝试使用leader-line实现的目标，您可能会发现使用react-xarrows也可以实现它。

https://www.npmjs.com/package/react-xarrows

React-xarrows 可以更轻松地集成到 React 应用程序中（如果您愿意，甚至可以使用 DOM 标识符而不是 React Refs）。

请参阅此示例代码（直接取自上面的链接），显示用法。

import React, { useRef } from "react";
import Xarrow from "react-xarrows";
 
const boxStyle = {
  border: "grey solid 2px",
  borderRadius: "10px",
  padding: "5px",
};
 
function SimpleExample() {
  const box1Ref = useRef(null);
  return (
    <div
      style={{ display: "flex", justifyContent: "space-evenly", width: "100%" }}
    >
      <div ref={box1Ref} style={boxStyle}>
        hey
      </div>
      <p id="elem2" style={boxStyle}>
        hey2
      </p>
      <Xarrow
        start={box1Ref} //can be react ref
        end="elem2" //or an id
      />
    </div>
  );
}

Answer 2

我制作了一个小型原型来说明如何实现它。

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 简单原型