ReactJs - 是否可以根据组件树的状态设置 url 或查询字符串答案

【问题标题】：ReactJs - is it possible to set the url or querystring based on state of component treeReactJs - 是否可以根据组件树的状态设置 url 或查询字符串
【发布时间】：2015-08-07 14:57:48
【问题描述】：

我有一个包含多个嵌套组件的组件，特别是选项卡、药丸等。任何时候都不可见。

我希望能够根据 URL 参数（或 URL）设置它们的默认状态/道具，但我不清楚如何在 React 中实现这一点。

例如，我有一个带有两个选项卡的组件（引导程序）。当用户选择第二个选项卡时，我可以用参数修改URL，以便页面刷新，保留当前选择的选项卡的状态。

我已包含Router，但找不到任何我想要实现的简单示例。

我想做的是访问/解析查询字符串参数并设置子组件的状态和最终属性。

非常欢迎任何建议。

我可以提供选项卡组件的示例，但认为它不会为问题增加任何价值。

【问题讨论】：

我也在使用 Reflux，所以是否有可能以某种方式监听将 URL 参数存储起来的路由器操作？

标签： reactjs react-router

【解决方案1】：

我这样做的方式是利用 React contexts。这是一个未记录但功能强大的功能，类似于可变道具，可由组件及其所有子组件访问。

我建议谷歌搜索。把你的思想包起来有点困难，但一旦你开始玩它就开始有意义了。这是我现在正在处理的一些代码的示例摘录：

var React = require('react');

var Router = require('react-router'),
    Route = Router.Route,
    RouteHandler = Router.RouteHandler;

var ReactBootstrap = require('react-bootstrap'),
    DropdownButton = ReactBootstrap.DropdownButton,
    Nav = ReactBootstrap.Nav,
    Navbar = ReactBootstrap.Navbar;

var ReactRouterBootstrap = require('react-router-bootstrap'),
    MenuItemLink = ReactRouterBootstrap.MenuItemLink;

var Nav = React.createClass({
  render: function() {
    return (
      <Navbar brand='My Cool Page!' inverse toggleNavKey={0}>
        <Nav right eventKey={0}> {}
          <DropdownButton eventKey={2} title='Projects'>
            <MenuItemLink eventKey="1" to="myCoolPage" params={{ awesomeName: "matt" }}>Go to My Cool Page!</MenuItemLink>
          </DropdownButton>
        </Nav>
      </Navbar>
    );
  }
);

var MyCoolPage = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  getInitialState: function() {
    return {
      awesomeName: ''
    };
  },
  componentWillMount: function() {
    // Called once before the first render
    this.getAwesomeName();
  },
  componentWillReceiveProps: function(nextProps) {
    // Called when props change after the first render
    // From my testing, this is also called when a context changes
    this.getAwesomeName();
  },
  getAwesomeName: function() {
    var { router } = this.context;
    var awesomeName = router.getCurrentParams().awesomeName;

    this.setState({awesomeName: awesomeName});
  },
  render: function() {
    return (
      <h1>My awesome name is: {this.state.awesomeName}</h1>
    );
  }
});

var App = React.createClass({
  render: function() {
    return (
      <div>
        <Nav />
        <RouteHandler {...props} />
      </div>
    );
  }
});

var routes = (
  <Route handler={App}>
    <Route name="myCoolPage" path="myCoolPage/:awesomeName" handler={MyCoolPage} />
  </Route>
);

Router.run(routes, Router.HashLocation, function (Root) {
  React.render(<Root/>, document.body);
});

【讨论】：