Is it an anti-pattern to have a presentational component inside another presentational component?

user_8845098 0
Viewed 225

Consider the following React+Redux pattern:

Container -> Presentational -> Presentational

And 

Container -> Presentational -> Container

Are they practical things to do? If not, what should I do and how?

Real life situation: I am creating a header component in react, and this is the components structure:

App (stores the browser info as props)
  -> Header (passes events and props down to NavigationBar)
    -> NavigationBar (print out all the navigation items if they are not dropdown, else include the Dropdown component)
      -> Dropdown

Do I need to separate Dropdown component with navigationBar component?

redux reactjs
2 Answers

I think this concept is covered pretty well in the react tutorial: https://reactjs.org/tutorial/tutorial.html

When building react components, sometimes it's hard to tell what will be a piece you need once, and what you might want to start recycling later. Luckily react is pretty good at handling this situation. I generally just start off building components and when I realize I want to reuse something, I abstract it into it's own component.

To use your example, I might start out with:

const Menu = (props) => {
    return (
       <div id='menu'>
         <div className='menuItem'>
           Home
         </div>
         <div className='menuItem'>
           About
           <div className='dropdown'>
             <div className='subMenuItem'>
               About Me
             </div>
             <div className='subMenuItem'>
               About My Cat
             </div>
           </div>
         </div>
         <div className='menuItem'>
           Contact
         </div>
       </div>
    )
}

Maybe I realize I will need several dropdown menus with the same behavior so I just abstract it away into it's own component.

const Dropdown = (props) => {
  return ( <div className='dropdown'>
    {props.items.map( item => (
      <div className='subMenuItem'>
        {item}
      </div>
    ))}
  </div>)
}
const Menu = (props) => {
    return (
       <div id='menu'>
         <div className='menuItem'>
           Home
         </div>
         <div className='menuItem'>
           About
           <Dropdown items={['About Me', 'About My Cat']} />
         </div>
         <div className='menuItem'>
           Contact
           <Dropdown items={['Send me email', 'Send me snail mail']} />
         </div>
       </div>
    )
}
user_88944240

In my opinion ,it is not .For example , window system is putting Presentational component in another , nest ,and html element is the same . both of them are well designed.

user_79291150
Related