我想在我的 React 應(yīng)用程序上使用Aladin Lite 應(yīng)用程序。在不使用 React 構(gòu)建網(wǎng)站時(shí)，通過執(zhí)行以下操作將應(yīng)用程序嵌入到 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>然后你就有了一個(gè)aladin可以在 Javascript 中使用的對象。我將如何在我的 React 頁面上使用這個(gè)應(yīng)用程序？它不是為 React 構(gòu)建的，而是使用 jquery。我需要能夠訪問它的 props 來改變天空的視野，這在 Javascript 中是通過以下方式完成的：aladin.setFov(1)現(xiàn)在是 React 門戶的好時(shí)機(jī)嗎？謝謝。
2 回答
藍(lán)山帝景
TA貢獻(xiàn)1843條經(jīng)驗(yàn) 獲得超7個(gè)贊
創(chuàng)建一個(gè) React 組件來渲染阿拉丁天空圖（這樣其他地方就不會出現(xiàn)阿拉丁了）。然后，您可以在內(nèi)部定義和配置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貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊
let?aladin?=?window.A.aladin('#aladin-lite-div',?{?survey:?'P/DSS2/color',?fov:60?})該函數(shù)A.aladin無法直接調(diào)用，因?yàn)樗峭獠?JavaScript 函數(shù)。
- 2 回答
- 0 關(guān)注
- 148 瀏覽
添加回答
舉報(bào)
0/150
提交
取消