- 首页
- 其他开发
- 使用反应路由器当前路由在菜单上有条件地设置活动类
使用反应路由器当前路由在菜单上有条件地设置活动类
[英] Conditionally set active class on menu using react router current route
本文介绍了使用反应路由器当前路由在菜单上有条件地设置活动类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是 react router 1.0.2，我的路由如下所示:
ReactDOM.render(<提供者商店={商店}><路由器历史={历史}><Route path="/" component={App}><IndexRoute 组件={Home}/><Route path="triangles" component={Triangles}/></路线></路由器></提供者>,document.querySelector('.container'));
我的 App 组件看起来像这样，我想我可以在 props 中传递位置:
import React, {Component} from 'react';从'./menu'导入菜单；导出默认类 App 扩展组件 {使成为() {返回 (<div><菜单/><div className="jumbotron">{this.props.children &&React.cloneElement(this.props.children, {位置:this.props.location})}
);}};
我想有条件地在 Menu 组件上设置一个活动类:
import React, {Component} from 'react';import { pushPath } from 'redux-simple-router';从反应路由器"导入{链接}；导出默认类菜单扩展组件{使成为() {返回 (<nav role="navigation" className="navbar navbar-default"><div id="navbarCollapse" className="折叠导航栏折叠"><ul className="nav navbar-nav"><li className={this.props.location.pathname === '/' ?'活动':''}><链接到="/">主页</链接>
</nav>);}};
但是调用菜单的render函数时this.props.location为null?
如何将 props 传递给子组件?
解决方案
看起来您没有将道具传递给正确的元素.App 的 children 将是正在呈现的任何子路由(所以要么是 Home 要么是 Triangles)，但是你希望将道具传递给 Menu.
要做到这一点，只需通过 JSX 传入即可:
import React, {Component} from 'react';从'./menu'导入菜单；导出默认类 App 扩展组件 {使成为() {返回 (<div><菜单位置={this.props.location}/><div className="jumbotron">{this.props.children}
);}};
I am using react router 1.0.2 and my routes look like this:
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="triangles" component={Triangles}/>
</Route>
</Router>
</Provider>,
document.querySelector('.container')
);
My App component looks like this and I thought I could pass the location in the props:
import React, {Component} from 'react';
import Menu from './menu';
export default class App extends Component {
render() {
return (
<div>
<Menu/>
<div className="jumbotron">
{this.props.children && React.cloneElement(this.props.children, {
location: this.props.location
})}
</div>
</div>
);
}
};
I want to conditionally set an active class on the Menu component:
import React, {Component} from 'react';
import { pushPath } from 'redux-simple-router';
import { Link } from 'react-router';
export default class Menu extends Component {
render() {
return (
<nav role="navigation" className="navbar navbar-default">
<div id="navbarCollapse" className="collapse navbar-collapse">
<ul className="nav navbar-nav">
<li className={this.props.location.pathname === '/' ? 'active' : ''}>
<Link to="/">Home</Link>
</li>
</ul>
</div>
</nav>
);
}
};
But the this.props.location is null when the menu's render function is called?
How can I pass props to child components?
解决方案
It doesn't look like you're passing the prop into the correct element. The children of App would be whatever child route is being rendered (so either Home or Triangles), but you want the prop to be passed to Menu.
To do that, just pass it in via JSX:
import React, {Component} from 'react';
import Menu from './menu';
export default class App extends Component {
render() {
return (
<div>
<Menu location={this.props.location} />
<div className="jumbotron">
{this.props.children}
</div>
</div>
);
}
};
这篇关于使用反应路由器当前路由在菜单上有条件地设置活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
