web-dev-qa-db-fra.com

Je ne peux pas appeler une classe en tant que fonction. Réagissez une erreur d’affichage du routeur dans la console si j’utilise le format es6.

J'utilise l'extension de routeur de réaction pour définir les routes de réaction dans mon application. tout fonctionne bien, mais le problème est que si j'utilise la syntaxe es6 pour définir la classe App.js que index.js "ne peut pas appeler une classe en tant que fonction" . si change App.js format de fichier à App.jsx cela résoud mon problème . Comment puis-je définir le fichier index.jsx dans le format .jses6? ou toute autre manière appropriée de résoudre ce problème? ce sont mon fichier de routeur de réaction et mon fichier app.js . Voici le lien github de la bibliothèque de réaction-routeur 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'))

Réagissez maintenant le fichier de routeur est // fichier 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;

** Édité: ** J'ai la configuration du chargeur de packs Web suivante

{
            test:  /(\.js|\.jsx)$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
             presets:['es2015','react']
           }
        }
reactjsreact-nativereact-router
8
Muhammad Ateek

Votre classe devrait étendre React.Component, pas React.createClass.

par exemple.

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

importer uniquement ce dont vous avez besoin dans le composant au lieu de la totalité de la bibliothèque. exemple ci-dessous

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

Commencez également à utiliser env au lieu de es2015 car env prend en charge toutes les dernières versions de ES. Ceci est recommandé par babel. Installer babel-preset-env et désinstaller babel-preset-es2015

 npm install -d babel-preset-env

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

Dans le fichier de configuration Webpack, recherchez un chargeur Babel qui test est un fichier jsx. modifier jsx à js

0
Damien Leroux