在 React 应用程序中使用 Aladin Lite 应用程序（不是为 React 构建的）

Question

我想在我的 React 应用程序上使用 Aladin Lite app。

在没有 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。

我需要能够访问它的道具来改变天空的视野，这在 Javascript 中由以下人员完成：

aladin.setFov(1)

现在是 React 门户的好时机吗？

谢谢。

Answer 1

创建一个将渲染 Aladin 天空图的 React 组件（因此其他任何地方都不会出现 Aladin）。然后，您可以在 componentDidMount（如果您使用 class 组件）或 React.useEffect（如果您使用钩子）中定义和配置 aladin。

Index.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>
...

Aladin.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 />

Answer 2

只是对 Michal 回答的更新。

let aladin = window.A.aladin('#aladin-lite-div', { survey: 'P/DSS2/color', fov:60 })

无法直接调用函数 A.aladin，因为它是一个外部 JavaScript 函数。

在 React 应用程序中使用 Aladin Lite 应用程序（不是为 React 构建的）

Using Aladin Lite app (not built for React) in React app

html

javascript

astronomy

reactjs