我想在我的 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 關注
- 152 瀏覽
添加回答
舉報
0/150
提交
取消