0

ES6 構文を ES5 に変更するだけで、ローカル マシンでReact-Router の例https://github.com/rackt/react-router/tree/master/examplesのいずれか (およびすべて) を実行しようとすると、同じエラーが発生し続けます同じコード行から生じる

コード

 Router.run(routes, function (Handler) {

エラー

Cannot read property 'validateProps' of undefined

ES6 を使用して依存関係を宣言し、Router を分解する代わりに、例について何も変更していません。

var React = require('react');
var Router = require('react-router');
var { Route, RouteHandler, Link } = Router;

インデックスにjsファイルへのリンクを含め、ルーターに対してこれを行いました

var Route = Router[0];
var RouteHandler = Router[1];
var Link = Router[2];

これは、 github からここに貼り付けられた ES5 バージョンのコードを使用した jsfiddle です。

これは、私が作業しようとしているES5/6の変更を含む完全なコードです

var Route = Router[0];
    var RouteHandler = Router[1];
    var Link = Router[2];

var App = React.createClass({
  render: function () {
    return (
      <div>
        <ol>
          <li><Link to="home">Home</Link></li>
          <li><Link to="signin">Sign in</Link></li>
          <li><Link to="forgot-password">Forgot Password</Link></li>
        </ol>
        <RouteHandler/>
      </div>
    );
  }
});

var SignedIn = React.createClass({
  render: function () {
    return (
      <div>
        <h2>Signed In</h2>
        <RouteHandler/>
      </div>
    );
  }
});

var Home = React.createClass({
  render: function () {
    return (
      <h3>Welcome home!</h3>
    );
  }
});

var SignedOut = React.createClass({
  render: function () {
    return (
      <div>
        <h2>Signed Out</h2>
        <RouteHandler/>
      </div>
    );
  }
});

var SignIn = React.createClass({
  render: function () {
    return (
      <h3>Please sign in.</h3>
    );
  }
});

var ForgotPassword = React.createClass({
  render: function () {
    return (
      <h3>Forgot your password?</h3>
    );
  }
});

var routes = (
  <Route handler={App}>
    <Route handler={SignedOut}>
      <Route name="signin" handler={SignIn}/>
      <Route name="forgot-password" handler={ForgotPassword}/>
    </Route>
    <Route handler={SignedIn}>
      <Route name="home" handler={Home}/>
    </Route>
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.getElementById('example'));
});
4

1 に答える 1

1

オブジェクトの分解を参照してください

var { Route, RouteHandler, Link } = Router;本質的に意味：

var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var Link = Router.Link;

あなたのアプローチ：

var Router = ReactRouter;
var Route = Router[0];
var RouteHandler = Router[1];
var Link = Router[2];

Router はReactRouter配列ではなくオブジェクト (コンソールに入力すると、オブジェクトとそのメソッド/プロパティが表示されます) であるため、うまく機能しません。したがって、ブラケット インデックスを使用することはできません。

あなたのコードでの作業例: http://jsbin.com/wotefobuji/1/edit?html,js,output

于 2015-02-18T22:38:08.227 に答える