我试图将我学到的东西实现到网站中。我正在构建我的网站的第一部分“导航栏”这些应该是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,然后是课程组件。
灿你有一个容器中的容器?我有我的App.js什么是整个网站的主容器。 – chobo2
当然,这不是问题。 – Hardy
我的错误。它实际上是在我的组件文件夹中。我发布了上面的代码,但不知道应该在那里还是不在。我是按照这个https://github.com/buckyroberts/React-Redux-Boilerplate – chobo2