我想在我的 React 应用程序上使用Aladin Lite 应用程序。在不使用 React 构建网站时，通过执行以下操作将应用程序嵌入到 div 中非常简单：<!-- include Aladin Lite CSS file in the head section of your page --><link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" /><!-- you can skip the following line if your page already integrates the jQuery library --><script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js" charset="utf-8"></script><!-- insert this snippet where you want Aladin Lite viewer to appear and after the loading of jQuery --><div id="aladin-lite-div" style="width:400px;height:400px;"></div><script type="text/javascript" src="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script><script type="text/javascript"> var aladin = A.aladin('#aladin-lite-div', {survey: "P/DSS2/color", fov:60});</script>然后你就有了一个aladin可以在 Javascript 中使用的对象。我将如何在我的 React 页面上使用这个应用程序？它不是为 React 构建的，而是使用 jquery。我需要能够访问它的 props 来改变天空的视野，这在 Javascript 中是通过以下方式完成的：aladin.setFov(1)现在是 React 门户的好时机吗？谢谢。
2 回答
蓝山帝景
TA贡献1843条经验 获得超7个赞
创建一个 React 组件来渲染阿拉丁天空图（这样其他地方就不会出现阿拉丁了）。然后，您可以在内部定义和配置aladin componentDidMount（如果您使用类组件）或React.useEffect（如果您使用钩子）。
索引.html：
...
<head>
<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
<!-- you can skip the following line if your page already integrates the jQuery library -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js" charset="utf-8"></script>
<!-- insert this snippet where you want Aladin Lite viewer to appear and after the loading of jQuery -->
<script type="text/javascript" src="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>
</head>
...
阿拉丁.jsx：
const Aladin = () => {
React.useEffect(() => {
let aladin = A.aladin('#aladin-lite-div', { survey: 'P/DSS2/color', fov:60 })
aladin.setFov(1)
}, [])
return (
<div id='aladin-lite-div' style={{ width: '400px', height: '400px' }} />
)
}
export default Aladin
然后，在你想要渲染阿拉丁天空图的任何地方：
import Aladin from './Aladin'
...
<Aladin />
互换的青春
TA贡献1797条经验 获得超6个赞
let aladin = window.A.aladin('#aladin-lite-div', { survey: 'P/DSS2/color', fov:60 })该函数A.aladin无法直接调用，因为它是外部 JavaScript 函数。
- 2 回答
- 0 关注
- 25 浏览
添加回答
举报
0/150
提交
取消