javascript - 如何在 React 中使用 leader-line(一个外部 javascript 库)？

Question

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

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;

This is the npm package page of leader-line.

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