React 组件 this.props 始终为空 [英] React component this.props is always empty

问题描述

我关注了一对的examples 试图从路由访问参数在处理它的 React 组件中.但是，render 或 componentDidMount 中 this.props 上的 console.log 结果总是 {} 当我希望它包含来自 gamesView 路由的 gameId 时.

client.js 启动路由器:

//本地的 HTML5 History API 修复if (config.environment === 'dev') {var router = Router.create({路由:路由});} 别的 {var router = Router.create({ 路由:路由，位置:Router.HistoryLocation });}路由器运行(函数(处理程序){反应.render(<处理程序/>,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}/></路线>);module.exports = 路由；

...和 ​​app.js 包装了其他路由，我已经在 {...this.props} 和 {...this.props} 中尝试了它代码>RouteHandler.如果我从 render 函数内部 console.log(this.props) 在这里也返回 {}:

var App = React.createClass({渲染:函数(){返回 (
<RouteHandler {...this.props}/>
);}});module.exports = 应用程序；

最后是我希望看到 props 对象的 gamesView React 组件.这里 this.props 也是 {} 并且以下导致错误 TypeError: $__0 is undefined var $__0= this.props.params,gameId=$__0.gameId;:

var GamesView = React.createClass({渲染:函数(){var { gameId } = this.props.params;返回 (<div><h1>游戏名称</h1><p>{gameId}</p>

);}});module.exports = GamesView;

有人有什么想法吗?

解决方案

讨论之后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({混合:[ Router.State ]，渲染:函数(){var gameId = this.getParams().gameId;返回 (<div><h1>游戏名称</h1><p>{gameId}</p>

);}});module.exports = GamesView;

I've followed a couple of examples in an attempt to get access to a parameter from a Route in the React component that handles it. However the result of console.log on this.props from inside the render or componentDidMount is always {} when I'd expect it to contain the gameId from the gamesView route.

client.js which starts the Router:

// 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 with some routes removed for simplicity:

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

module.exports = routes;

...and app.js which wraps the other routes, I've tried it both with and without {...this.props} in the RouteHandler. If I console.log(this.props) from inside the render function here is also returns {}:

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

module.exports = App;

Finally the gamesView React component that I expect to see the props object. Here this.props is also {} and the following results in the error 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;

Anybody have any ideas?

解决方案

After discussing on the React Router (RR) Github it turned out this was due to me using an older version of RR (v0.11.6).

Looking at the example in the docs for that release it showed that I needed to use a Router.State mixin and then get the expected param via var gameId = this.getParams().gameId;.

Without upgrading RR the working version of my original example for GamesView becomes:

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;

这篇关于React 组件 this.props 始终为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！