1

我正在使用反应路由器。我在路由部分传递状态的地方。但是路由器仅第一次更新参数 这是代码的小提琴链接 这是表类

var Table = React.createClass({
         mixins: [ Router.State ],
        getInitialState: function() {
                                    var table;
                                    var table_id = this.getParams().table_id;
                                    console.log(table_id);
                                    tables.forEach(function(model) {
                                      if(model.id == table_id) {
                                        console.log(model);
                                        table = model;
                                      }
                                    });
                                    return {
                                      table: table
                                    }
                                }

})

这是路由器

var routes = (
      <Route handler={Tables} path="/">
        <DefaultRoute handler={Index} />
        <Route name="table" path="/table/:table_id" handler={Table}/>
      </Route>
    );
   ReactRouter.run(routes, function (Handler) {
      React.render(<Handler/>, document.body);
   });

更新 这是表类：

var Tables = React.createClass({
    indexTemplate: function() {
      return <h2>Please select a table</h2>
    },
    render: function() {
            var links = tables.map(function(table) {
              return <Link to="table" params= {{ table_id:table.id}} className="panel six columns" key={table.id}>{table.id}</Link>
            });
          return (
                  <div className="row">
                    <div className="twelve rows">
                      <h1>Ordr</h1>
                      <hr />
                      <div className="row">
                        <div id="tables" className="four columns">
                          <h2>Tables</h2>
                          {links}
                        </div>
                        <div id="order" className="eight columns">
                          <RouteHandler/>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              }
           });
4

1 回答 1

2

应该有一些代码将Table组件嵌套在Tables组件中，如下所示：

<ReactRouter.RouteHandler {...this.props} key={this.props.params.tableId}/>

如果您不指定key属性并且在不同的表之间路由，例如/table/1and /table/2，Table则不会安装和卸载组件，只是重新渲染。因此getInitialState方法不会被解雇。

更新

您应该在小提琴中更改此行（第 43 行）：

<RouteHandler />

至

<RouteHandler key={this.props.params.table_id}/>
// table_id name comes from this definition: <Route name="table" path="/table/:table_id" handler={Table}/>

工作小提琴：http: //jsfiddle.net/t4hvuu0r/

于 2015-02-09T09:03:54.067 回答