Reactでセクションを作成するには

Question

セクションをHTMLで作成するには：1つのルートdivを作成し、<Header/>と<Footer/>のようなコンポーネントで埋めるか、いくつかのhtmlセクションを作成し、それぞれに対応するコンポーネントを入力しますか？

Answer 1

私は私はそうのようなヘッダーとフッターのコンポーネントを保持している単一のルート要素を持っていることが多いクリーナーであることを発見しています：

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

     {this.props.children} 

     <Footer /> 
    ); 
    } 
} 

これは私がそれらを膨らませることなく、私のコンポーネントをレンダリングすることができますヘッダーとフッターのコンポーネントを使用します。このセットアップを使用しない場合は、新しいページを作成するたびにヘッダーとフッターのコンポーネントを含める必要があります。

Answer 2

リアクタコンポーネントは構成可能なので、ヘッダー/フッターの複雑さに応じてどちらの方法もうまくいきます。

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> 
) 
} 

（サンプルヘッダやフッタなどの）あなたからより多くの情報がなければ、我々はより多くのアドバイスを与えることはできません。