javascript - React 组件 this.props 总是空的

Question

我关注了 couple的 examples试图从处理它的 React 组件中的路由访问参数。然而 console.log 的结果在 this.props从 render 里面或 componentDidMount总是 {}当我希望它包含 gameId来自 gamesView路线。

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;

有人有什么想法吗？

Answer 1

您不会看到这些参数，直到您位于路由器中定义的组件处。 App 不会知道它们的任何信息。但是，如果您将 console.log(this.props.params) 放入您的 gamesView 组件中，您应该会看到它们。