Question

我使用React的Flux技术在ReactJS中编写了一个简单的ToDo应用程序。但是当我运行我的代码时，我收到的错误是Uncaught ReferenceError: require is not defined。我尝试了一些可用的解决方案，例如将import替换为require，但问题仍未解决。请告诉我们如何解决这个问题？完整的代码发布在下面。（所有代码文件都在同一目录中。）

的index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>React Flux</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" />

    <script> var exports = {}; </script>
    <script src="Todos.js" type="text/babel"></script>
</head>

<body>
  <div id="app"></div>
</body>

</html>

Todos.js

import Todo from "./Todo";
import TodoStore from "./TodoStore";

export default class Featured extends React.Component {
    constructor() {
        super();
        this.state = {
            todos: TodoStore.getAll(),
        };
    }
    render() {
        const { todos } = this.state;
        const TodoComponents = todos.map((todo) => {
            return <Todo key={todo.id} {...todo}/>;
        });

        return (
            <div>
                <h1>Todos</h1>
                <ul>{TodoComponents}</ul>
            </div>
        );
    }
}

React.render(<Featured/>, document.getElementById("app"));

TodoStore.js

import {EventEmitter} from "events";

class TodoStore extends EventEmitter {
    constructor() {
        super();
        this.todos = [
            {
                id: 111,
                text: "Go Shoping",
                complete: false
            },
            {
                id: 222,
                text: "Pay Bills",
                complete: false
            },
        ];
    }
    getAll() {
        return this.todos;
    }
}

const todoStore = new TodoStore;

export default todoStore;

Todo.js

import React from "react";

export default class Todo extends React.Component {
    constructor(props) {
        super();
    }

    render() {
        const { complete, edit, text } = this.props;

        const icon = complete ? "true icon" : "false icon"

        if (edit) {
            return (
                <li>
                    <input value={text} focus="focused"/>
                </li>
            );
        }

        return (
            <li>
                <span>{text}</span>
                <span>{icon}</span>
            </li>
        );
    }
}

实施Flux技术后，ReactJS代码无法正常工作

0 个答案: