一个文件中的多个组件抛出一个错误！我用的是用CDN的

Question

当我在react文件中创建多个组件时，它会显示以下错误

Uncaught :超级表达式必须为null或函数，而不是未定义的

我使用CDN使用reactJS。纱线安装好了。我使用Babel将jsx转换为es15。

请帮我解决错误。由于我新的反应，我不习惯于错误和我停留在开始阶段，流苏.

这是我的密码

​

var myList = ['hello'];

var onFormSubmit = function onFormSubmit(e) {
    e.preventDefault();
    var item = e.target.elements.input.value;

    if (item) {
        myList.push(item);
        e.target.elements.input.value = "";
        //render template function
        console.log(myList);
        renderTemplate();
    }
};

class NavBar extends React.Component() {
    render() {
        return(
            <nav><h1>My App</h1></nav>
        )
    }
}

class Form extends React.Component() {
    render() {
        return(
            <form onSubmit={onFormSubmit}>
                <input type="text" name="input" />
                <button>Add item</button>
            </form>
        )
    }
}

class List extends React.Component() {
    render() {
        return(
            myList.map((item) => {
                <p>{item}</p>
            })
        )
    }
}

class MyApp extends React.Component() {
    render() {
        return(
            <div>
                <NavBar />
                <Form />
                <List />
            </div>
        )
    }
}

var appRoot = document.getElementById('app');

var renderTemplate = () => {
    ReactDOM.render(<MyApp />, appRoot);
}

renderTemplate();

​

Answer 1

不带括号的class Something extends React.Component { }应该适用于您，因为您是在引用类，而不是调用类的新实例。