这里的另一个问题做出反应,我有我的问题的解决方案,但对我来说,似乎并不十分“响应”,所以我希望另一种解决方案。
我使用的反应的路由器,所以我app.js(入口点)的底部是:
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={Login} ></IndexRoute>
<Route path="searches" component={searches}></Route>
<Route path="notifications" component={notifications}></Route>
</Route>
</Router>
, app);
现在,你可以看到我的首要成分是如此的布局,在我心目中,我想我的配置(可重复使用)的部件,例如我想我的布局在菜单项的标题传递给头组件,然后如果我例如加载搜索,然后我可能想传递的功能等,以搜索组件挂接到它的功能,所以我必须在布局如下:
export default class Layout extends React.Component {
constructor() {
super();
}
render() {
const containerStyle = {
paddingRight: '5px'
}
// Figure out which props we want based on location.pathname
const {pathname} = this.props.location;
switch(pathname){
case "/searches":
// So now I need to add some props, functions or anything else to this component
theProps = {someProp: "value"}
const theComponent = React.cloneElement(this.props.children, {theProps})
break;
}
return (
< div style={containerStyle} class="container">
< Header menuItems={this.getMenuItemsForScreen()}/ >
{ theComponent}
< Footer / >
< /div>
);
}
}
所以基本上,以便从总体我的布局通过道具我要克隆的组件,然后给它一些更多的道具?它只是感觉有点脏,但我似乎无法找到其他方式嵌入这种逻辑的一种方式?
谢谢
渣
我想这些路由组件伟大的事情是,他们拯救你从你的组件那些丑陋的开关。
我不知道您要发送到搜索组件哪种道具。在你的问题是没有明确什么是你正在试图解决,而不是使用反应路由器文档中的标准方法的一个实际问题。
我建议考虑这些选择:
searches
组件,以避免收到任何道具。尽量让每个路线有没有收到任何道具的组件。所以您移动代码定义theProps = {someProp: "value"}
组件内的道具(searches
)。或者,如果你需要的searches
组件与另一时间的道具等道具可以重复使用,然后进行定义这些道具和调用searches
组件,然后一个新的父组件。但是,如果这些道具是复杂的,依赖于你的应用程序状态,那么也许你可以考虑使用助焊剂,终极版或另一种状态的容器,并获得来自应用程序的状态。message
复制)的代码RouteConfiguration sample路线:
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'
const App = React.createClass({
render() {
return (
<div>
<h1>App</h1>
<ul>
<li><Link to="/about">About</Link></li>
<li><Link to="/inbox">Inbox</Link></li>
</ul>
{this.props.children}
</div>
)
}
})
const About = React.createClass({
render() {
return <h3>About</h3>
}
})
const Inbox = React.createClass({
render() {
return (
<div>
<h2>Inbox</h2>
{this.props.children || "Welcome to your Inbox"}
</div>
)
}
})
const Message = React.createClass({
render() {
return <h3>Message {this.props.params.id}</h3>
}
})
render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>
</Route>
</Router>
), document.body)
在这种情况下,你的代码将有<a href={"/inbox/message/"+id} ...>
地方在你的代码以及那些会在这种情况下设置的ID参数提供的道具。您使用这个代码子组件的功能组件:
<Route path="/:id" component={Child} />
function Child({ match }) {
return (
<div>
<h2>ID:{match.params.id}</h2>
</div>
);
}