我試圖將我學到的東西實現到網站中。我正在構建我的網站的第一部分「導航欄」這些應該是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