Question

我是React的初学者，当我编译下面的代码会出错时。

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar'

const API_KEY = '';

// this component should produce some html
// Some HTML

const App = () => {
    return (
        <div>
            <SearchBar/>
        </div>
    )
};

// aciklama
ReactDOM.render(<App/>, document.querySelector('.container'));

search_bar.js：

import React, {Component} from 'react';

const SearchBar extends Component {
    render() {
        return <input />;
    }
}

export default SearchBar;

我从终端启动了npm服务器，它在以下链接中给出了错误：

error picture

./src/components/search_bar.js中的

错误模块构建失败：SyntaxError：意外令牌（3:16） webpack：编译失败。

Answer 1

这是一个错字

class SearchBar extends Component {  //fixed
    render(){
        return <input />;
    }
}

从const更改为class

Answer 2

const扩展一个类。它本身必须是一个类。因此，const应该更改为class。

React扩展关键字Webpack无法编译

2 个答案: