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

Posted 2023-02-22

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

【英文标题】：Cannot call a class as a function, React router show error in console if i use es6 format

【发布时间】：2016-10-05 17:52:24

【问题描述】：

我正在使用反应路由器扩展在我的应用程序中定义反应路由。一切正常，但问题是如果我使用 es6 语法来定义类 App.js 而不是 index.js “不能将类调用为函数”。 如果将 App.js 文件格式更改为 App.jsx 它可以解决我的问题。 我如何以.js es6 格式定义index.jsx 文件？或任何适当的方法来解决这个问题？ 这些是我的反应路由器文件和 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 加载器配置

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

【参考方案1】：

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

例如

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

【参考方案2】：

在 webpack 配置文件中搜索一个 babel 加载器，test 一个 jsx 文件。将jsx修改为js

【讨论】：

问题已更新。使用 webpack 加载器配置。我已经为 js 添加了加载器

【参考方案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']