我想在我的 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;
最佳答案
根据您尝试使用 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>
);
}
关于javascript - 如何在 React 中使用 leader-line(一个外部 javascript 库)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50589365/