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

使用example删除import语句。

获得外部脚本时，您不应使用import。

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

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

查看日志：

Answer 2

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

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

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

2 个答案: