javascript - Changing components based on url with react router - Stack Overflow

admin 管理员组

文章数量: 1086019

This is more of an architectural question regarding react than a specific issue, but what is considered best practice for managing state/props with a layout ponent and a several child ponents which are rendered based on the url?

Note: I'm aware that similar questions have been asked, but this is a little bit different. [How to update ReactJS ponent based on URL / path with React-Router

Lets say I have something like the following code: A profile page (main layout view) with navigation links for profile sub-sections (settings, preferences, account details, etc), and a main panel where each of the sub-section is rendered.

So currently I would have something like this: my router routes.js

<Router history={browserHistory}>
  <Route path='/profile' ponent={Profile} >
    <IndexRoute ponent={Summary} />
    <Route path='/profile/settings' ponent={Settings} />
    <Route path='/profile/account' ponent={Account} />
    <Route path='/profile/preferences' ponent={Preferences} />
  </Route>
</Router>

and a stripped down version of my profile layout ponent profile.js

class Profile extends React.Component {

  constructor(props) {
    super(props)
  }

  render(){

    let pathName = this.props.location.pathname;

    return(
      <div className='container profile-page'>
        <div className='side-nav'>
          <ul>
            <li><Link to='/profile'>Summary</Link></li>
            <li><Link to='/profile/settings'>Settings</Link></li>
            <li><Link to='/profile/account'>My Account</Link></li>
            <li><Link to='/profile/preferences'>Preferences</Link></li>
          </ul>
        </div>
        <div className='main-content'>
         {this.props.children}
        </div>
      </div>
    )
  }
}

export default Profile;

So this kind of works. The child ponents will render based on the url. But then how do I manage state and props? The way I understand React and Flux, I want the Profile ponent to manage state and listen to changes on my stores, and to propagate those changes to its children. Is this correct?

My problem is that there doesn't seem to be an intuitive way to pass props to ponents rendered by this.props.children, which makes me feel like my current architecture and/or understanding of flux is not correct.

A bit of guidance would be much appreciated.

This is more of an architectural question regarding react than a specific issue, but what is considered best practice for managing state/props with a layout ponent and a several child ponents which are rendered based on the url?

Note: I'm aware that similar questions have been asked, but this is a little bit different. [How to update ReactJS ponent based on URL / path with React-Router

Lets say I have something like the following code: A profile page (main layout view) with navigation links for profile sub-sections (settings, preferences, account details, etc), and a main panel where each of the sub-section is rendered.

So currently I would have something like this: my router routes.js

<Router history={browserHistory}>
  <Route path='/profile' ponent={Profile} >
    <IndexRoute ponent={Summary} />
    <Route path='/profile/settings' ponent={Settings} />
    <Route path='/profile/account' ponent={Account} />
    <Route path='/profile/preferences' ponent={Preferences} />
  </Route>
</Router>

and a stripped down version of my profile layout ponent profile.js

class Profile extends React.Component {

  constructor(props) {
    super(props)
  }

  render(){

    let pathName = this.props.location.pathname;

    return(
      <div className='container profile-page'>
        <div className='side-nav'>
          <ul>
            <li><Link to='/profile'>Summary</Link></li>
            <li><Link to='/profile/settings'>Settings</Link></li>
            <li><Link to='/profile/account'>My Account</Link></li>
            <li><Link to='/profile/preferences'>Preferences</Link></li>
          </ul>
        </div>
        <div className='main-content'>
         {this.props.children}
        </div>
      </div>
    )
  }
}

export default Profile;

So this kind of works. The child ponents will render based on the url. But then how do I manage state and props? The way I understand React and Flux, I want the Profile ponent to manage state and listen to changes on my stores, and to propagate those changes to its children. Is this correct?

My problem is that there doesn't seem to be an intuitive way to pass props to ponents rendered by this.props.children, which makes me feel like my current architecture and/or understanding of flux is not correct.

A bit of guidance would be much appreciated.

• javascript
• reactjs
• flux

Share Improve this question Follow edited May 23, 2017 at 12:24 CommunityBot 111 silver badge asked Jun 24, 2016 at 5:55 jmknolljmknoll 1,05455 gold badges1111 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I feel what you are doing is perfectly fine. You are on the right path.

There's a bination of APIs that React provides you with that will take care of exactly what you're not certain about of how to achieve ( way to pass props to ponents rendered by this.props.children )

First, you need to take a look at cloneElement

It will basically take a React element, clone it, and return another with props that you can change, alter or replace entirely based on your needs.

Furthermore, bine it with the Children Utilities - loop through the children that were provided to your top level ponent and make the necessary changes to each element individually.

A proposed sample usage could be as simple as

<div className='main-content'>
    {React.children.map(this.props.children, (child, index) => {
       //Get props of child
       const childProps = child.props;

       //do whatever else you need, create some new props, change existing ones
       //store them in variables

       return React.cloneElement(child, {
           ...childProps, //these are the old props if you don't want them changed
           ...someNewProps,
           someOldPropOverwritten, //overwrite some old the old props 
       });
     )}
</div>

Use these tools to create truly generic and re-usable ponents, anywhere. More monly used utilities from Children are map, forEach and toArray. Each with their own respective goals.

Hope this helps.

本文标签： javascriptChanging components based on url with react routerStack Overflow