Question

我使用react路由器扩展来定义应用程序中的反应路由。工作正常的每一件事，但问题是，如果我使用es6语法来定义类App.js而不是index.js“不能将类称为函数”。如果将App.js文件格式更改为App.jsx，则会解决我的问题。如何以index.jsx .js格式定义es6文件？或任何正确的方法来解决这个问题？这些是我的反应路由器文件和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'))

现在反应路由器文件是 // 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 loader config

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

Answer 1

您的课程应该延伸myComboBox.addValueChangeListener(event1 -> { Object value = twinColSelect.getValue(); twinColSelect.removeAllItems(); myComboBox.getValue.getUsers().forEach(ob -> twinColSelect.addItem(ob.getUserName())); twinColSelect.setValue(value); });，而不是React.Component。

e.g。

React.createClass

Answer 2

在webpack配置文件中搜索test jsx文件的babel加载程序。将jsx修改为js

Answer 3

仅导入组件中需要的内容，而不导入整个库。下面的例子

import React, {Component} from 'react';
 class App extends Component {
    render() {
        return <div>Hello, world</div>;
    }
}

也要开始使用env而不是es2015，因为env支持所有最新的ES版本。这是babel推荐的。安装babel-preset-env并卸载babel-preset-es2015

 npm install -d babel-preset-env

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

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

3 个答案: