reactjs - 无法将类作为函数调用，如果我使用 es6 格式，React 路由器会在控制台中显示错误

Question

我使用 react 路由器扩展在我的应用程序中定义 react 路由。一切都工作正常，但问题是，如果我使用 es6 语法来定义类 App.js 而不是 index.js “无法将类作为函数调用”。 如果将 App.js 文件格式更改为 App.jsx 它可以解决我的问题。 我如何以 .js es6 格式定义 index.jsx 文件？或有任何正确的方法来解决这个问题？ 这些是我的 React 路由器文件和 app.js 文件。 这是react-router库的github链接 https://github.com/reactjs/react-router

index.jsx

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, browserHistory } from 'react-router'
import App from './app/App'

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}/> 

  </Router>
), document.getElementById('app'))

现在 react 路由器文件是 //App.js 文件

import React from 'react';
import { Link } from 'react-router'

class App extends React.createClass{
  constructor(props) {
      super(props);
    }
  render() {
    return (
        <div>
         This is a App.js file write in es6.
        </div>
      )
  }
}


export default App;

**编辑:** 我有以下 webpack 加载器配置

{
            test:  /(\.js|\.jsx)$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
             presets:['es2015','react']
           }
        }

Answer 1

你的类应该扩展React.Component，而不是React.createClass。

例如

class App extends React.Component {
    render() {
        return <div>Hello, world</div>;
    }
}