反应js：文件中的多个组件引发错误！我正在使用反应js使用CDN

Question

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

未捕获的TypeError：超级表达式必须为null或函数，而不是未定义

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

请帮我解决错误。因为我是React的新手，我不习惯于错误而且我在开始阶段陷入困境......

这是我的代码

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 { }应该适合您，因为您正在引用该类，而不是调用它的新实例。