如何使用React創建部分

Question

我應該如何在我的html中創建部分：創建一個根div，並使用像<Header/>和<Footer/>這樣的組件填充它，或者創建幾個html部分並用相應的組件填充每個部分？

Answer 1

我發現，這是一個更加簡潔，讓我有保存頁眉和頁腳的部件，像這樣一個根組件：

class RootComponent extends React.Component { 
    render() { 
    return (
     <Header /> 

     {this.props.children} 

     <Footer /> 
    ); 
    } 
} 

這讓我使我的組件，而無需臃腫他們與頁眉和頁腳組件。如果我不使用此設置，每次創建新頁面時都必須包含頁眉和頁腳組件，這也是令人煩惱的。

Answer 2

因爲React組件是可組合的，所以兩種方法都能很好地工作，具體取決於頁眉/頁腳的複雜程度。如果他們有足夠簡單，這個工作（我使用的是無狀態的功能組件爲簡單起見）：

function Root() { 
    return (
    <div> 
    <header>/* simple header content */</header> 
    <footer> /* simple footer content */</footer> 
    </div> 
) 
} 

但作爲header和footer標籤中的內容變得更加複雜，那麼您可以將他們自己的組件讓您的文件小，可讀：

function Header() { 
    return (
    <header> 
    // complex content 
    </header> 
) 
} 
// Similar for Footer component 
function Root() { 
    return (
    <div> 
     <Header/> 
     <Footer/> 
    </div> 
) 
} 

沒有從您的詳細信息（如樣品頁眉和頁腳），我們無法給出更多的建議。