2016-08-04 51 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

相關問題