wake-up-neo.net

Ich kann eine Klasse nicht als Funktion aufrufen. React-Router zeigt einen Fehler in der Konsole an, wenn ich das Es6-Format verwende

Ich benutze die Reaktiverweiterung, um die Reaktionsrouten in meiner Anwendung zu definieren. alles funktioniert gut, aber das Problem ist, wenn ich die Klasse App.js mit Es6-Syntax definiere, als index.js "keine Klasse als Funktion aufgerufen werden kann" . Wenn das App.js-Dateiformat in App.jsx geändert wird, löst es mein Problem . Wie kann ich index.jsx-Datei im .jses6-Format definieren? oder einen geeigneten Weg, um dieses Problem zu lösen? Dies sind meine Reakt-Router-Datei und App.js-Datei . Hier ist der Github-Link der Reakt-Router-Bibliothek 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'))

Reagieren Sie nun, dass die Routerdatei .__ ist. // App.js-Datei

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;

** Editiert: ** Ich habe folgende webpack loader config

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

Ihre Klasse sollte React.Component erweitern, nicht React.createClass.

z.B.

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

importieren Sie nur das, was Sie in der Komponente benötigen, anstatt die gesamte Bibliothek. Beispiel unten

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

Beginnen Sie auch mit der Verwendung von env anstelle von es2015, da env alle aktuellen ES-Versionen unterstützt. Dies wird von Babel empfohlen. Installieren Sie Babel-Preset-Env und deinstallieren Sie Babel-Preset-ES2015

 npm install -d babel-preset-env

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

Suchen Sie in der Webpack-Konfigurationsdatei nach einem Babel Loader, der eine jsx-Datei test enthält. jsx in js ändern

0
Damien Leroux