通过反应路由器传下来的动态菜单项

问题描述 投票:0回答:2

这里的另一个问题做出反应,我有我的问题的解决方案,但对我来说,似乎并不十分“响应”,所以我希望另一种解决方案。

我使用的反应的路由器,所以我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>
    );
  }
}

所以基本上,以便从总体我的布局通过道具我要克隆的组件,然后给它一些更多的道具?它只是感觉有点脏,但我似乎无法找到其他方式嵌入这种逻辑的一种方式?

谢谢

reactjs react-router
2个回答
2
投票

我想这些路由组件伟大的事情是,他们拯救你从你的组件那些丑陋的开关。

我不知道您要发送到搜索组件哪种道具。在你的问题是没有明确什么是你正在试图解决,而不是使用反应路由器文档中的标准方法的一个实际问题。

我建议考虑这些选择:

  1. 重构你的searches组件,以避免收到任何道具。尽量让每个路线有没有收到任何道具的组件。所以您移动代码定义theProps = {someProp: "value"}组件内的道具(searches)。或者,如果你需要的searches组件与另一时间的道具等道具可以重复使用,然后进行定义这些道具和调用searches组件,然后一个新的父组件。但是,如果这些道具是复杂的,依赖于你的应用程序状态,那么也许你可以考虑使用助焊剂,终极版或另一种状态的容器,并获得来自应用程序的状态。
  2. 如果你真的需要路由参数,然后确保道具可序列化,使他们能够URL的一部分。检查以下(从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参数提供的道具。

0
投票

您使用这个代码子组件的功能组件:

<Route path="/:id" component={Child} />


function Child({ match }) {
  return (
    <div>
      <h2>ID:{match.params.id}</h2>
    </div>
  );
}
© www.soinside.com 2019 - 2024. All rights reserved.