Javascript 在React应用程序中使用Aladin Lite应用程序（非React专用）_Javascript_Html_Reactjs_Astronomy

Javascript 在React应用程序中使用Aladin Lite应用程序（非React专用）

javascript html reactjs

Javascript 在React应用程序中使用Aladin Lite应用程序（非React专用）,javascript,html,reactjs,astronomy,Javascript,Html,Reactjs,Astronomy,我想在我的React应用程序上使用在不使用React构建网站时，通过执行以下操作将应用程序嵌入到div中非常简单：  <link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" /> <!-

我想在我的React应用程序上使用

在不使用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>

现在是你的好时机吗

多谢各位

创建一个React组件，该组件将渲染Aladin天空贴图（因此其他任何地方都不会有Aladin）。然后，您可以在

componentDidMount

（如果您使用类组件）或

React.useffect

（如果您使用钩子）中定义和配置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

const Aladin=（）=>{
React.useffect（（）=>{
设aladin=A.aladin（“#aladin lite div”，{survey:'P/DSS2/color'，fov:60}）
阿拉丁·塞托夫（1）
}, [])
返回(
)
}
导出默认阿拉丁

然后，在要渲染Aladin天空贴图的任何位置：

import Aladin from './Aladin'
...
<Aladin />

从“./Aladin”导入Aladin
...

只是对Michal答案的更新

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

函数

A.aladin

不能直接调用，因为它是一个外部JavaScript函数。

我认为这将帮助您：

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