web-dev-qa-db-ja.com

クラスを関数として呼び出すことができません、React es6形式を使用すると、ルーターがコンソールにエラーを表示します

私はreactルーター拡張機能を使用してアプリケーションでreactルートを定義しています。すべてが正常に機能していますが、問題は、es6構文を使用してクラスApp.jsをindex.jsよりも「関数としてクラスを呼び出すことができない」と定義した場合です。 App.jsファイル形式をApp.jsxに変更すると、問題が解決します。 index.jsxファイルを.jses6形式で定義するにはどうすればよいですか？またはこの問題を解決する適切な方法はありますか？これらは私の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']
           }
        }
reactjsreact-nativereact-router
8
Muhammad Ateek

クラスはReact.ComponentではなくReact.createClassを拡張する必要があります。

例えば.

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

ライブラリ全体ではなく、コンポーネントに必要なものだけをインポートします。以下の例

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

また、envはすべての最新のESバージョンをサポートしているため、es2015の代わりにenvの使用を開始します。これは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']
   }
}
0
Hemadri Dasari

Webpack構成ファイルで、jsxファイルをtestするbabelローダーを検索します。 jsxをjsに変更します

0
Damien Leroux