jsfiddle："Unclosed regular expression" 和 "Expected ')'"

Question

这是我第一次使用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 有误解吗？

Answer 1

在 basic 在线代码编辑器中，编写和运行 JSX 的方法是将它放在一个普通的 <script> 标签中，由 Babel 转译使用对全局 React 对象的引用。

React 未导入，因为您不在模块中 - 它由先前的 <script> 标记放在 window 上。

使用：

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>

例如，上面的结果是完整的，运行nable 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, 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"))
    </script>
</body>
</html>

jsfiddle："Unclosed regular expression" 和 "Expected ')'"

jsfiddle: "Unclosed regular expression" and "Expected ')'"

jsx

jsfiddle

reactjs