这些应该是 Reactjs + Redux 中的组件还是容器答案

【问题标题】：Should these be components or containers in Reactjs + Redux这些应该是 Reactjs + Redux 中的组件还是容器
【发布时间】：2016-08-04 19:43:57
【问题描述】：

我正在尝试将我学到的知识应用到一个网站中。我正在构建我网站的第一部分“导航栏”

顶部有徽标和 2 个链接（主页按钮、注销按钮）和侧导航栏（MaterilizeCss sidenav）栏（在移动设备上变成汉堡菜单）。

现在侧导航有这个

所有学生课程的列表（一旦他们点击课程，它将在网站容器中间加载该课程）

在他们的课程列表下方是一个“添加课程”按钮，用于添加更多课程。

现在

我很困惑这些应该是容器还是组件？现在我把我的 NavBar 做成了一个容器。

虽然我认为显示“课程”将是一个组件（尽管我猜它可能是一个带有课程列表的容器，然后当然是组件）并且“添加课程”也将是一个组件。

我也有一个 App 组件（但也许它应该是一个容器），其中包含所有其他容器/组件。

export default class App extends React.Component {
  render() {
    return (
      <NavBar />
    )
  }
}

想法？

编辑

我有一些代码（html 代码）。它可能更容易看出我应该如何分解它

 <nav className="light-blue">
    <div className="nav-wrapper container">
      <a id="logo-container" href="#" className="brand-logo">App</a>
      <ul className="right hide-on-med-and-down">
        <li><a href="/Home/Index"><i className="fa fa-2x fa-home" aria-hidden="true"></i></a></li>
        <li><a href="/Account/SignOut"><i className="fa fa-sign-out fa-2x " aria-hidden="true"></i></a></li>
      </ul>
          <ul id="slide-out" className="side-nav fixed">
            <li>
                <a href="#!">Course 1</a>
            </li>
            <li>
                <a href="#!">Course 2</a>
            </li>
            <li>
                <a href="#!">Course 3</a>
            </li>
            <li>
                <a className="waves-effect waves-light"><i className="fa fa-plus" aria-hidden="true">Add</i></a>
            </li>
            <li className="hide-on-large-only"><a href="/Home/Index">Home</a></li>
            <li className="hide-on-large-only"><a href="/Account/SignOut">Signout</a></li>
        </ul>
      <a href="#" data-activates="slide-out" className="button-collapse"><i className="material-icons">menu</i></a>
    </div>
  </nav>

我有这个组件：

export default class App extends React.Component {
  render() {
    return (
      <NavBarContainer />
    )
  }
}

所以现在 NavBarContainer 吐出了我发布的整个 html。我当然需要打破这个。

我可以拥有 SideNavContainer，然后是课程组件。

【问题讨论】：

标签： reactjs redux

【解决方案1】：

当我开始使用 redux 时，这对我来说也很困难。尝试像“数据接收器”这样的思考容器。所以容器接收到 redux 数据并将其传播到它的子组件“虚拟组件”。

所以我会将列表作为容器（包括“添加课程”-按钮），而“课程”只是虚拟组件（显示父容器传递的数据）。

当然，您可以让多个容器在您的网站各处（如工具栏等）接收相同/其他数据。

【讨论】：

容器中可以有容器吗？我确实有我的 App.js，就像整个网站的主容器。
当然没问题。
我的错误。它实际上在我的组件文件夹中。我发布了上面的代码，但不确定现在是否应该在那里。我在关注这个github.com/buckyroberts/React-Redux-Boilerplate
您会将 NavBar 作为组件还是容器放在什么位置？我想我同意我应该有 CourseListContainer 和 Course Component
我已将我的代码添加到代码审查中，因为我现在有示例代码，我认为我现在需要对其进行更多审查。 codereview.stackexchange.com/questions/137871/…

【解决方案2】：

您想要一个容器来连接并发送数据（这是您在操作中连接并将您的状态映射到您的道具的地方），在您的情况下，我将有 1 个容器作为顶层以及您所描述的所有其他内容将是内部仅接收（和使用）道具的组件。我会将您的导航拆分为几个虚拟组件以供重复使用，例如 nav-bar-component，其中包含 nav-item-component 等等。

当然，当您获得更复杂的应用程序时，情况并非总是如此，您可能需要更多容器。如果您要创建一个大型应用程序，您绝对应该花时间构建状态树并决定是否需要在多个区域使用容器进行拆分。说到这一点，如果您正在考虑应用程序的状态树，容器往往是状态的根级别区域（除非您嵌套它们）。

然而，你可以有一个导航栏容器和课程容器，但我认为这对于你这里的复杂程度来说真的没有必要。

顺便说一下，这些东西通常被称为智能组件和愚蠢组件，这篇文章有一篇关于上述组件的很好的文章http://jaketrent.com/post/smart-dumb-components-react/，还有一篇很棒的文章，作者是 redux 的作者 - https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.jic76qxfz

【讨论】：