如何解决jsfiddle:“未封闭的正则表达式”和“预期的''”
这是我第一次使用 jsfiddle,所以可能有一些我不明白的地方。我试图将我的工作从 VS Code 粘贴到 jsfiddle 以向其他人展示,但出现错误:
jsfiddle:https://jsfiddle.net/u5mhj4ro/1/
我的按钮收到错误“未关闭的正则表达式”
<button id="new-array-button" onClick={() => newArray()}>New Array</button>
<button id="merge-sort-button" onClick={() => mergeSort(arr)}>Merge Sort</button>
<button id="bubble-sort-button" onClick={() => bubbleSort(arr)}>Bubble Sort</button>
当我放置斜杠以使按钮结束标记变为 <//button>
时,错误似乎消失了。
但随后出现了另一个错误:以下行的预期为“)”:
return (
<div id="main-container">
错误似乎比我最初看到的还要多。我误解了 jsfiddle 吗?
解决方法
在基本在线代码编辑器中,编写和运行 JSX 的方法是将它放在一个普通的 <script>
标签中,该标签由 Babel 使用对全局 React 对象的引用进行转换。
React 不是导入,因为您不在模块中 - 它通过前面的 <script>
标记放在窗口中。
使用:
const { useState,useEffect } = React;
const numberOfBars = 5; // Default is 75
const barHeight = 7;
function SortingVisualizer() {
等,您的代码将运行。
https://jsfiddle.net/tL5h0ro3/
const { useState,useEffect } = React;
const numberOfBars = 5; // Default is 75
const barHeight = 7;
function SortingVisualizer() {
const [arr,setArr] = useState([]);
useEffect(() => {
newArray();
},[])
function newArray() {
const tempArr = [];
for(let i = 0; i < numberOfBars; i++) {
tempArr.push(Math.floor(Math.random() * 100) + 5)
}
setArr(tempArr);
}
return (
<div id="main-container">
<button id="new-array-button" onClick={() => newArray()}>New Array</button>
<button id="merge-sort-button" onClick={() => mergeSort(arr)}>Merge Sort</button>
<button id="bubble-sort-button" onClick={() => bubbleSort(arr)}>Bubble Sort</button>
<div id="bar-container">
{arr.map((value,index) => (
<div
className='bar'
key={index}
style={{
backgroundColor: "aquamarine",height: `${value * barHeight}px`
}}
/>
))}
</div>
</div>
)
}
ReactDOM.render(<SortingVisualizer />,document.querySelector("#app"))
#new-array-button {
position: absolute;
}
#merge-sort-button {
position: absolute;
left: 100px;
}
#bubble-sort-button {
position: absolute;
left: 200px;
}
#bar-container {
align-items: flex-end;
background-color: lightgray;
display: flex;
height: 730px;
justify-content: center;
}
.bar {
margin: 0 2px;
width: 20px;
}
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id='app'></div>
例如,上面的结果是完整的、可运行的 HTML 是:
<!DOCTYPE html>
<html>
<head>
<style>
#new-array-button {
position: absolute;
}
#merge-sort-button {
position: absolute;
left: 100px;
}
#bubble-sort-button {
position: absolute;
left: 200px;
}
#bar-container {
align-items: flex-end;
background-color: lightgray;
display: flex;
height: 730px;
justify-content: center;
}
.bar {
margin: 0 2px;
width: 20px;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
</head>
<body>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id='app'></div>
<script type="text/babel">
const { useState,document.querySelector("#app"))
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。