如何在HTML中通过CDN在VS Code及Stack Overflow代码片段中运行React组件？

你的代码无法运行主要有以下几个问题：

• 未给包含JSX的script标签指定type="text/babel"，Babel无法转译JSX语法
• 直接使用组件内部的状态和方法，但这些变量在全局script中未定义
• 缺少ReactDOM.render的挂载目标节点
• meta标签的charset拼写错误（uttf-8应为utf-8）
• CDN环境下需通过React.useState调用状态钩子，而非直接解构导入

以下是修正后的完整可运行代码，适配Stack Overflow代码片段：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React Todo Form</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <style>
        .todo-form {
            display: flex;
            gap: 8px;
            margin: 16px;
        }
        .todo-input {
            padding: 8px;
            flex: 1;
        }
        .todo-button {
            padding: 8px 16px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 挂载React组件的容器 -->
    <div id="root"></div>

    <script type="text/babel">
        // 定义ToDoForm组件
        function ToDoForm(props) {
            const [input, setInput] = React.useState("");
            
            const handleChange = e => {
                setInput(e.target.value);
            };
            
            const handleSubmit = e => {
                e.preventDefault();
                if (input.trim()) {
                    props.onSubmit({
                        id: Math.floor(Math.random() * 10000),
                        text: input.trim()
                    });
                    setInput(""); // 提交后清空输入框
                }
            };

            return (
                <form className="todo-form" onSubmit={handleSubmit}>
                    <input
                        type="text"
                        placeholder="Add a todo"
                        value={input}
                        name="text"
                        className="todo-input"
                        onChange={handleChange}
                    />
                    <button className='todo-button'>
                        Add todo
                    </button>
                </form>
            );
        }

        // 模拟父组件的onSubmit回调
        function handleTodoSubmit(todo) {
            console.log("新增待办:", todo);
            // 这里可以添加渲染待办列表的逻辑
        }

        // 渲染组件到root容器
        ReactDOM.render(
            <ToDoForm onSubmit={handleTodoSubmit} />,
            document.getElementById('root')
        );
    </script>
</body>
</html>

关键修正说明： #

• 添加了id="root"的DOM容器，作为React组件的挂载目标
• 给script标签加上type="text/babel"，让Babel处理JSX和ES6语法
• 将useState改为React.useState，适配CDN全局引入的React对象
• 实现了handleTodoSubmit回调函数，模拟组件接收props的逻辑
• 修正了charset拼写错误，并添加了基础样式让组件更直观
• 增加了输入框非空判断，提交后清空输入框的优化

内容的提问来源于stack exchange，提问作者Brian