我有一个组件,其中有多个嵌套组件,特别是选项卡、药丸等。任何时候都无法看到所有组件。
我希望能够根据 URL 参数(或 URL)设置它们的默认状态/属性,但我不清楚如何在 React 中实现这一点。
例如,我有一个带有两个选项卡的组件(引导程序)。当用户选择第二个选项卡时,我可以使用参数修改 URL,以便刷新页面时保留当前所选选项卡的状态。
我已经包括了Router
但找不到我想要实现的目标的任何简单示例。
我希望能够做的是访问/解析查询字符串参数并设置子组件的状态和最终属性。
任何建议都非常受欢迎。
我可以提供选项卡组件的示例,但认为它不会为问题增加任何价值。
我的做法是利用 Reactcontext
s。这是一个未记录但功能强大的功能,其作用类似于可变的 props,可以被组件及其所有子组件访问。
我建议用谷歌搜索一下。理解它有点困难,但一旦你尝试过它就会变得有意义。这是我现在正在处理的一些代码的示例摘录:
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);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)