Это анти-паттерн - иметь презентационный компонент внутри другого презентационного компонента?

Question

Рассмотрим следующий шаблон React + Redux:

Container -> Presentational -> Presentational

А

Container -> Presentational -> Container

Это практичные вещи? Если нет, что мне делать и как?

Ситуация в реальной жизни: Я создаю компонент заголовка в реакции, и это структура компонентов:

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

Нужно ли разделять Dropdown компонент с navigationBar компонентом?

Answer 1

Я думаю, что эта концепция довольно хорошо описана в учебнике по реакции: https://reactjs.org/tutorial/tutorial.html

При сборке реагирующих компонентов иногда трудно сказать, какой кусок вам понадобится однажды, и что вы, возможно, захотите начать переработку позже. К счастью, реакция довольно хороша в этой ситуации. Обычно я просто начинаю сборку компонентов, и когда я понимаю, что хочу что-то использовать повторно, я абстрагирую это в собственный компонент.

Чтобы использовать ваш пример, я мог бы начать с:

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>
    )
}

Может быть, я понимаю, что мне понадобится несколько выпадающих меню с одинаковым поведением, поэтому я просто абстрагирую их в свой компонент.

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>
    )
}

Answer 2

По моему, это не так. Например, оконная система помещает презентационный компонент в другой элемент nest, а html - это то же самое. оба они хорошо спроектированы.