Question

我有一个包含多个嵌套组件的组件，特别是标签，药片等。任何时候都不可见。

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

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

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

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

非常欢迎任何建议。

我可以提供标签组件的示例，但不要认为它会为问题添加任何值。

Answer 1

我采用这种方式来利用React context。它是一个没有文档但功能强大的功能，它可以像组件及其所有子组件一样访问可变道具。

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

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);
});

ReactJs - 是否可以根据组件树的状态设置url或querystring

1 个答案: