javascript 相关问题

我将地图API脚本添加到index.js类返回中： var mapContainer = document.getElementById('map'), 地图选项 = { 中心：新 kakao.maps.LatLng(37.56591, 126.9789...</desc> <question vote="0"> <p>我将地图API脚本添加到index.js类返回：</p> <pre><code><script> var mapContainer = document.getElementById('map'), mapOption = { center: new kakao.maps.LatLng(37.56591, 126.97894), level: 4, mapTypeId : kakao.maps.MapTypeId.ROADMAP }; var map = new kakao.maps.Map(mapContainer, mapOption); </script> </code></pre> <p>它给出了两个错误：</p> <blockquote> <p>'}' 预期。（第 4 行“：”）意外的令牌。您指的是 <pre><code>{'}'}</code></pre> 还是 <pre><code>&rbrace;</code></pre>？（第 7 行“}”）</p> </blockquote> <p>它应该在 html 中工作。 React 不是应该返回 html 属性吗？我曾经以为它可能不接受脚本，但是下面的代码没有语法错误：</p> <pre><code><script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=xxxxxxxxxxx"></script> </code></pre> <p>*使用React的dangerouslySetInnerHTML属性也不起作用。它确实修复了语法错误，但不显示我的地图：</p> <p><a href="https://www.gatsbyjs.org/docs/custom-html/" rel="nofollow noreferrer">https://www.gatsbyjs.org/docs/custom-html/</a></p> <p>* 不能修复语法错误</p> <p>这是完整的<pre><code>index.js</code></pre>代码：</p> <pre><code>import React from "react" export default class Home extends React.Component { render() { return ( <div style={{ color: `purple` }}> <p>Welcome to donghwankim.com!</p> <p>Powered by Gatsby</p> <div id="map" style={{width:'500px', height:'400px'}}></div> <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script> <script> var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(37.56591, 126.97894), // 지도의 중심좌표 level: 4, // 지도의 확대 레벨 mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류 }; // 지도를 생성한다 var map = new kakao.maps.Map(mapContainer, mapOption); </script> </div> )} } </code></pre> <p>我尝试并确认了原始 html 文件工作：（忘记添加 https: 和隐藏密钥。非常抱歉。）</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>다음 지도 API</title> </head> <body> <div id="map" style="width:1000px;height:500px;"></div> <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script> <script> var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(37.56591, 126.97894), // 지도의 중심좌표 level: 4, // 지도의 확대 레벨 mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류 }; // 지도를 생성한다 var map = new kakao.maps.Map(mapContainer, mapOption); </script> </body> </html> </code></pre> </question> <answer tick="false" vote="1"> <p>您可以使用<pre><code>dangerouslySetInnerHTML</code></pre>。</p> <pre><code><script dangerouslySetInnerHTML={{ __html: ` var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(37.56591, 126.97894), // 지도의 중심좌표 level: 4, // 지도의 확대 레벨 mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류 }; // 지도를 생성한다 var map = new kakao.maps.Map(mapContainer, mapOption); `, }} /> </code></pre> </answer> </body></html>

javascript html reactjs gatsby

回答 0 投票 0

如何在 JavaScript 中的 Playwright Tests 中运行代码时防止浏览器关闭

我正在尝试在浏览器中记录网络调用。对于我的用例，我要求浏览器处于打开状态，并且只能使用脚本关闭。我目前正在使用 page.pause() fu...

javascript node.js ui-automation playwright

回答 6 投票 0

将所有`*`重定向到nextjs中的特定路径

我有一个登陆页面nextJs应用程序，可以将所有*重定向到特定路由，就像我们在react-router中所做的那样，我怎样才能在nextJs中做完全相同的事情我有一个登陆页面nextJs应用程序，可以将所有*重定向到特定路线，就像我们在react-router中所做的那样，我怎样才能在nextJs中做完全相同的事情 <BrowserRouter> <Routes> <Route path={ROUTES.ROOT} element={<Registry />} /> <Route path={ROUTES.ALL} element={<Navigate to={ROUTES.ROOT} />} /> </Routes> </BrowserRouter> export const ROUTES = { ALL: '*', ROOT: '/registry', }; 到目前为止我所做的是，我能够将特定路由重定向到特定路由，但无法将所有路由重定向到特定路由 const nextConfig = { async redirects() { return [ { source: '/path', // not able to "*" the route destination: '/registry', // Matched parameters can be used in the destination permanent: false, }, ]; }, }; module.exports = nextConfig; 不幸的是，nextJs 似乎没有正确的方法来处理 nextConfig 中的这种重定向，但是如果你想将任何 404 页面重定向到主页，你可以做的是：在pages中创建自定义404页面，请注意，您的页面必须命名为404 将此代码段添加到 404 文件中。 import { useEffect } from 'react' import { useRouter } from 'next/router' export default function Custom404() { const router = useRouter() useEffect(() => { router.replace('/') }) return null } 任何未找到的路线都应重定向到主页。请参阅 github 上的讨论编辑：最后一件事，如果你想在用户访问某个路由时处理某种逻辑并在失败时重定向，你可以使用 getServerSideProps: 来实现在渲染页面之前要在页面中处理某种逻辑的地方添加异步函数 getServerSideProps： // Page where you want to handle the logic // data is the props that comes from getServerSideProps function Page({ data }) { // Render data... } // This gets called on every request export async function getServerSideProps() { // fetch some data from external API const res = await fetch(`https://someapi/fetchData`) const data = await res.json() if(!data) { // Here we redirect the user to home if get some error at the API return { redirect: { destination: '/', permanent: false } } } // Otherwise pass the data to Page as props return { props: { data } } } export default Page 这只是一个示例，但您已经明白了，如果您想了解更多信息，请阅读此处的文档 { source: '/:path*', destination: '{SOME_URL}/:path*', }

javascript reactjs next.js

回答 2 投票 0

如何消除生成的画布图像上的抗锯齿？

我正在开发一个项目，我需要将缩写放在另一张图像上，它可以工作，但有一个问题。函数 downloadURI(uri, 名称) { const link = document.createElement('a');...

javascript html

回答 1 投票 0

如何在RoosterJS编辑器中设置HTML内容？

我目前正在项目中使用RoosterJS富文本编辑器，我需要以编程方式设置HTML内容。我的目标是用新的 HTML 替换编辑器的全部内容...

javascript typescript richtextbox

回答 1 投票 0

如何在SwipeJS中让item中的文字悬浮在图片上方？

我正在尝试从 SwipeJS 演示页面复制此效果，其中文本漂浮在每张幻灯片中的图像底部，但不在图像之外。我尝试过使用幻灯片内容，就像我在