React 组件 this.props 始终为空

IT技术 javascript reactjs reactjs-flux react-router react-router-component
2021-05-19 05:23:33

我跟着一对夫妇的例子，试图摆脱路由接入参数在处理它作出react的组成部分。然而，console.log在orthis.props内部的结果总是在我希望它包含来自路由的时候。rendercomponentDidMount{}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;

有人有任何想法吗？

2个回答

在您到达路由器中定义的组件之前，您不会看到这些参数。App对他们一无所知。如果你把console.log(this.props.params)你的gamesView成分，但是，你应该看到他们。

在对 React Router (RR) Github 进行讨论后，结果证明这是由于我使用了旧版本的 RR (v0.11.6)。

查看该版本的文档中的示例，它表明我需要使用Router.Statemixin，然后通过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;
其它你可能感兴趣的问题
上一篇JavaScript 在对象中创建数组并将数据推送到数组 下一篇我的新 Reactjs 应用程序出现 404 错误，它是否在寻找 main.js 文件？