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

Answer 2

我认为不是。例如，窗口系统将Presentational组件放置在另一个嵌套中，而html元素相同。他们两个都经过精心设计。

在另一个表示组件中包含一个表示组件是否是反模式？

2 个答案: