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>

jsfiddle jsx jsx reactjs reactjs

jsfiddle：“未封闭的正则表达式”和“预期的''”

问题描述

解决方法

相关问答