reactjs - 在另一个展示组件中包含一个展示组件是一种反模式吗？

Question

考虑以下 React+Redux 模式:

Container -> Presentational -> Presentational

和

Container -> Presentational -> Container

它们是实用的东西吗？如果没有，我应该做什么以及如何做？

现实生活情况:我正在 React 中创建一个头组件，这是组件结构:

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

我认为 React 教程中很好地涵盖了这个概念:https://reactjs.org/tutorial/tutorial.html

在构建 React 组件时，有时很难判断哪些是您需要的部分，哪些是您以后可能想要开始回收的。幸运的是，React 非常擅长处理这种情况。我通常只是开始构建组件，当我意识到我想重用某些东西时，我会将它抽象到它自己的组件中。

要使用您的示例，我可能会从:

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