问题标签 [codesandbox]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
122 浏览

javascript - 代码沙盒 - /src/index.js 执行两次

我有一个代码框(https://jjzlzn1jky.codesandbox.io/),它只有一个带有src="/src/index.js".

在 index.js 中,console.log("started")每当我重新加载页面时,代码都会执行两次(即,“started”被记录到控制台两次)。

任何想法如何阻止这种情况?

这是代码!

0 投票
1 回答
76 浏览

reactjs - 使搜索框功能化

我正在 React 中做一个地图项目并使用 google-maps-react api。我可以在搜索框中输入字符,但它不会过滤我的列表或标记。我怎样才能使它工作?


这是我的 App.js 的代码。我有 updateQuery 应该用在搜索框中输入的任何内容进行更新。filterItems 应该过滤所有位置。addRealMarkers 应该替换为过滤后的标记:


这是侧边栏代码。添加了另一个应该调用道具的 updateQuery 函数,然后您将在 InputBase 组件中看到更多代码:

您可以单击我的CodeSandbox 亲自查看。

0 投票
2 回答
2659 浏览

javascript - 如何在“codesandbox.io”上配置 ESLint / Prettier 格式规则

在“codesandbox.io”上,如何配置“Prettier”不再更改我的换行符(或者完全停用“Priettier”)?

另外,我怎样才能在 ESLint 中停用某个规则(在我的情况下react-hooks/rules-of-hooks,我想关闭它) - 在我的 ES201x 项目中似乎忽略了一个新创建的“eslintrc”文件?谢谢。

0 投票
1 回答
288 浏览

reactjs - Codesandbox “Preview on edit”不适用于 Aurelia,但适用于其他框架和原生 HTML

Codesandbox用来创建示例,在一个新项目中我们正在使用框架Aurelia。我可以让 Aurelia 继续运行,Codesandbox但我无法开始Preview on edit工作。我试图添加一个sandbox.config.jsonwith Hard Reload on Changeset 为 true 但它没有帮助。这不是一个交易破坏者,但是当您习惯于立即看到您的编辑时,它会很烦人。我认为问题在于Templateused is Static,但Codesandbox不提供 Aurelia 模板。有没有人解决这个问题?

Aurelia 代码示例,请参见文件app.html

https://codesandbox.io/s/n3yxrj9lwp

香草 HTML,见文件index.html

https://codesandbox.io/s/l73lnlvymq

反应,见文件index.tsx

https://codesandbox.io/s/7w5yx8qmz1

代码:

索引.html:

应用程序.js:

应用程序.html:

0 投票
2 回答
20603 浏览

javascript - 材质 UI 样式未渲染

我正在尝试使用 Material-UI 和 React 构建网站。当尝试通过 Hook API 使用 Material-UI 的样式时,它可以在 codesandbox.io 中在线运行,但在我运行它时无法在本地运行。边框半径属性似乎没有更新,按钮或指令对象中的任何属性也没有更新

当我在本地运行相同的代码时看到的

您可以在此处查看预期结果:https : //98m6j7m314.codesandbox.io,其中应用borderRadius属性后按钮边框为圆形

0 投票
1 回答
130 浏览

javascript - Aurelia start setRoot 给出错误 No applicationHost was specified

使用以下代码:

我收到此错误:

引导错误:错误:未指定应用程序主机。

如果我改用使用.then(a => a.setRoot("app.js", document.body))而不是.then(a => a.setRoot())一切正常。

在 Aurelias 自己的快速入门指南中,他们使用以下代码:

如果我切换到use.basicConfiguration我的代码,我仍然会遇到同样的错误。

https://aurelia.io/docs/tutorials/creating-a-todo-app#getting-ready-to-render

Codesandbox 重现:

https://codesandbox.io/s/0x4wvlly90

0 投票
1 回答
810 浏览

javascript - 在代码和框网站中使用 onclick 时出现 ReferenceError

我正在代码沙盒环境中编写一个 Vanilla JS 程序,如下所示:

当我在codesandbox.io中执行上面的代码片段时,它会给出以下错误:

ReferenceError 游戏未定义

不知道为什么codesandbox的执行环境无法检测到该Game功能。如果我在函数之外编写alert语句,那么它会在页面加载时成功调用:

我已经在 HTML 页面的 head 标记中正确链接了外部 JS 和 CSS 文件。

0 投票
2 回答
370 浏览

codesandbox - 如何在codesandbox中为react+typescript+mobx添加装饰器支持?

我希望能够在代码沙箱中的@observer打字稿代码中使用 mobx。但是我收到此错误:

/src/content.tsx:目前未启用对实验性语法“decorators-legacy”的支持 (6:1):

我已经:

1) 添加依赖项

在此处输入图像描述

2)添加.babelrc包含这些内容的文件

在此处输入图像描述

但我无法摆脱错误。我该如何解决?

0 投票
1 回答
2730 浏览

reactjs - 为反应库配置汇总

对不起,我没有在其他地方发布这个。

这是我的汇总配置

这是我项目的完整源代码https://github.com/withvoid/melting-pot

它发布在 npmjs https://www.npmjs.com/package/@withvoid/melting-pot

我的问题是,如果我将它添加到https://github.com/facebook/create-react-app项目中,我的库会很好用,但是当我将它添加到代码沙盒项目中时

https://codesandbox.io/s/6lqzp7q28w

它给了我一个错误

Invariant Violation Hooks 只能在函数组件的主体内部调用。

我似乎无法弄清楚这是代码沙盒问题(我对此表示怀疑)还是我的汇总配置问题。

0 投票
0 回答
148 浏览

javascript - 如何将 CodeSandbox proyecto 转换为 React 生产应用程序?

我在使用 React App 时遇到了一点问题,请参阅。我的电脑是个废话,我在 CodeSandbox 中编程。一周前,我完成了我在 CodeSandbox 中制作的 React 应用程序,并将其上传到我的主机中,我已将项目下载到我的电脑,并打开命令提示符进行生产构建。我已经为每个依赖项和那些东西使用了 npm install,大约一个小时左右,我的构建应该准备好了,所以我使用静态服务器在我的本地互联网上打开它,总共。当我将它上传到主机时它不起作用,我不知道为什么,但它变成空白。

请我需要帮助,因为我正在制作一个用于教育目的的网络:(

感谢我的网站:http ://eskoni.ezyro.com/d/很抱歉历史悠久 XD