Question

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

它顶部有徽标和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，然后使用课程组件。

Answer 1

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

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

当然，您可以让多个容器在您的站点中的任何位置接收相同/其他数据（如工具栏等）。

Answer 2

您希望容器连接到并发送数据（这是您在操作中连接并将状态映射到道具的地方），在您的情况下，我将有1个容器作为顶级和您描述的其他所有内容将是一个只接收（和使用）道具的组件。我会将您的导航分成几个虚拟组件以便重复使用，例如nav-bar-component，内部有nav-item-component，依此类推。

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

但是，您可以使用导航栏容器和课程容器，但我认为这对您在此处的复杂程度来说并不是必需的。

顺便说一句，这些东西通常被称为智能和愚蠢的组件，本文对所述组件http://jaketrent.com/post/smart-dumb-components-react/进行了很好的写作，并且在撰写redux的人员中也是一个很好的文章 - {{ 3}}

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

2 个答案: