我正在使用React Router 1.0.2,我的路由如下所示:
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')
);
我的App组件如下所示,我认为我可以在道具中传递位置:
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>
);
}
};
我想在Menu组件上有条件地设置一个活动类:
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>
);
}
};
但是,this.props.location
当调用菜单的render函数时,n为null吗?
如何将道具传递给子组件?
好像您没有将prop传递到正确的元素中。该children
的App
将是什么子路径被渲染(所以无论是Home
或Triangles
),但你想要的道具要传递给Menu
。
为此,只需通过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>
);
}
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句