2

パラメータを処理する React コンポーネントの Route からパラメータへのアクセスを取得するために、いくつかの例に従いました。ただし、or内からのconsole.logonの結果は、ルートからのが含まれていると予想される場合は常にです。this.propsrendercomponentDidMount{}gameIdgamesView

client.jsルーターを起動します。

// HTML5 History API fix for local 
if (config.environment === 'dev') {
    var router = Router.create({ routes: routes });
} else {
    var router = Router.create({ routes: routes, location: Router.HistoryLocation });
}

router.run(function(Handler) {
    React.render(
        <Handler />,
        document.getElementById('app')
    );
});

routes.js簡単にするためにいくつかのルートを削除しています。

var routes = (
    <Route name='home' path='/' handler={app}>
        <DefaultRoute handler={home} location="/" />
        <Route name='gamesView' path='/games/:gameId' handler={gamesView} />
    </Route>
);

module.exports = routes;

...そして、app.jsこれは他のルートをラップし{...this.props}ますRouteHandler。私console.log(this.props)が関数内からrenderここにいる場合も戻ります{}:

var App = React.createClass({
    render: function() {
        return (
            <div className='container'>
                <div className='row'>
                    <RouteHandler {...this.props} />
                </div>
            </div>
        );
    }
});

module.exports = App;

最後にgamesView、props オブジェクトが表示されると予想される React コンポーネントです。ここthis.propsにも{}あり、次の結果はエラーになりますTypeError: $__0 is undefined var $__0= this.props.params,gameId=$__0.gameId;。

var GamesView = React.createClass({
    render: function() {
        var { gameId } = this.props.params;

        return (
            <div>
                <h1>Game Name</h1>
                <p>{gameId}</p>
            </div>
        );
    }
});

module.exports = GamesView;

誰にもアイデアはありますか？

4

2 に答える 2

0

ルーターで定義されたコンポーネントに到達するまで、これらのパラメーターは表示されません。App彼らについて何も知らないでしょう。ただし、コンポーネントにを配置するconsole.log(this.props.params)と、それらが表示されるはずです。gamesView

于 2015-06-26T05:29:57.860 に答える
0

React Router (RR) Github で議論したところ、これは古いバージョンの RR (v0.11.6) を使用していたことが原因であることが判明しました。

そのリリースのドキュメントの例を見ると、Router.Stateミックスインを使用し、var gameId = this.getParams().gameId;.

RR をアップグレードしないと、元の例の作業バージョンは次のようにGamesViewなります。

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

var GamesView = React.createClass({

    mixins: [ Router.State ],

    render: function() {
        var gameId = this.getParams().gameId;

        return (
            <div>
                <h1>Game Name</h1>
                <p>{gameId}</p>
            </div>
        );
    }
});

module.exports = GamesView;
于 2015-06-27T15:19:54.903 に答える