无论如何，React 应用程序都没有在 Codepen 中显示？

Question

我有一个在 VS Studio 中制作的 React 应用程序，将其放入 codepen，它似乎没有加载任何东西，有什么建议吗？

我已尝试确保 React 已链接并检查了我的所有语法，在本地主机上没有错误但在 codepen 中没有显示。

代码我看了好几遍，感觉是个愚蠢的错误

https://codepen.io/donnieberry97/pen/EzmOvW

    class TodoListt extends React.Component {
      state = {};

      constructor(props) {
        super(props);

        this.state = {
          userInput: "",
          list: [],
          editing: false,
        };
      }

      changeUserInput(input) {
        this.setState({
          userInput: input
        })
      }


      addToList() {
        if (this.state.userInput === "") { (alert("Please enter a To-do")); return; };
        const { list, userInput } = this.state;
        this.setState({
          list: [...list, {
            text: userInput, key: Date.now(), done: false
          }],
          userInput: ''
        })
      }

      handleChecked(e, index) {
        console.log(e.target.checked);
        const list = [...this.state.list];
        list[index] = { ...list[index] };
        list[index].done = e.target.checked;
        this.setState({
          list
        })
      }

      handleEditing(e) {
        this.setState({
          editing: true
        })
      }

      handleRemoved(index) {
        const list = [...this.state.list];
        list.splice(index, 1);

        this.setState({
          list
        })
      }

      render() {

        var viewStyle = {};
        var editStyle = {};

        if (this.state.editing) {
          viewStyle.display = "none"
        }
        else {
          editStyle.display = "none"
        }


        return (
          <div className="to-do-list-main">
            <input
              onChange={(e) => this.changeUserInput(e.target.value)}
              value={this.state.userInput}
              type="text"
            />
            <div class="submitButton">
              <button onClick={() => { this.addToList(this.state.userInput) }}>Add todo</button>
            </div>

            {this.state.list.map((list, index) => (
              <div className="form">
                <ul>
                  {/* <div style={viewStyle} onDoubleClick={this.handleEditing.bind(t his)}> */}

                  <li key={list.key}>
                    <div class="liFlexCheck">
                      <input type="checkbox" onChange={(e) => this.handleChecked(e, index)} />
                    </div>
                    <div class="liFlexText">
                      <div class="liFlexTextContainer">
                        <span style={{ textDecoration: list.done ? 'line-through' : 'inherit' }}>
                          {list.text}
                        </span>
                      </div>
                    </div>
                    <button onClick={(index) => this.handleRemoved(index)}>Remove</button>
                    <input
                      type="text"
                      style={editStyle}
                      value={list.text}
                    />
                  </li>
                  {/* </div> */}
                </ul>
              </div>
            ))}


          </div>
        );
      }
    }

Answer 1

删除 import 语句，工作 example。

当你有 外部脚本 时，你不应该使用 import。

此外，您的代码中有许多错误需要处理，例如：

<div class="submitButton">，使用className.
列表中的每个 child 都应该有一个唯一的 key 道具。
带有 value 属性但没有 onChange 处理程序的表单字段。

查看日志：

Answer 2

在 codpen 中，您不需要导入 react 而只是编写代码，这是 codepen 的工作之一：codepen

来自codesandbox，你也可以学习所有导入，因为它不使用任何外部脚本，如果您向其中添加导入，您的代码将正常工作那就是 import ReactDOM from 'react-dom'; codesandbox 将显示所有这些建议，这是 codesandbox 工作示例：codesandbox

无论如何，React 应用程序都没有在 Codepen 中显示？

React app not showing in Codepen no matter what?

reactjs

codepen