2016-08-04 46 views
0

我试图将我学到的东西实现到网站中。我正在构建我的网站的第一部分“导航栏”这些应该是Reactjs + Redux中的组件或容器

沿着顶部有徽标和2个链接(主页按钮,注销按钮)和侧边导航(MaterilizeCss sidenav)栏(在手机上变成汉堡菜单)。

现在一边导航有这种

的所有学生的课程表(一旦他们点击一个当然这将加载该课程在网站容器中)

在他们的课程名单是一个“添加课程”按钮来添加更多课程。

现在

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

尽管我认为显示“课程”将是一个组件(尽管我猜它可能是一个包含课程列表,然后是组件的容器),“添加课程”也是一个组件。

我也有一个应用程序组件(但也许它应该是一个容器),它将具有所有其他容器/组件。

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,然后是课程组件。

回答

0

这对我来说也很难,当我从REDX开始。试着像“数据接收器”那样思考容器。所以容器接收到redux数据并将其分发给它的子组件“虚拟组件”。

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

当然,您可以让多个容器在您的站点的任何地方接收相同/其他数据(如工具栏等)。

+0

灿你有一个容器中的容器?我有我的App.js什么是整个网站的主容器。 – chobo2

+0

当然,这不是问题。 – Hardy

+0

我的错误。它实际上是在我的组件文件夹中。我发布了上面的代码,但不知道应该在那里还是不在。我是按照这个https://github.com/buckyroberts/React-Redux-Boilerplate – chobo2

0

你想要一个容器来连接并发送数据(这是你连接你的动作并将你的状态映射到你的道具的地方),在你的情况下,我将有一个容器作为顶层,描述将是一个刚刚接收(并使用)道具的组件。我会将您的导航栏分成几个虚拟组件以供重复使用,例如nav-bar-component,其中有nav-item-component,等等。

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

但是,您可以有一个导航栏容器和课程容器,但我认为这对于您在此处具有的复杂程度而言确实没有必要。

顺便说一句,这些东西通常被称为聪明和愚蠢的组件,这篇文章有一个很好的写了上称分量http://jaketrent.com/post/smart-dumb-components-react/,也是一个伟大的这里由那个谁创作的终极版 - https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.jic76qxfz

相关问题