在 React 应用程序中使用 Aladin Lite 应用程序（不是为 React 构建的）
我想在我的 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 门户的好时机吗？
谢谢。
慕桂英5465372回答
-
蓝山帝景
创建一个 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 /> -
互换的青春
let aladin = window.A.aladin('#aladin-lite-div', { survey: 'P/DSS2/color', fov:60 })该函数A.aladin无法直接调用，因为它是外部 JavaScript 函数。
随时随地看视频慕课网APP
相关分类
Html5