如何在一系列子組件中重用HTML組件包裝器？

Question

我有我認爲將是一個非常簡單的問題關於重新使用組件的HTML包裝。但我不確定什麼是「正確」的做法。

我想呈現一系列組件重複使用相同（複雜）html包裝爲他們每個人。然後在該包裝中呈現一組不同的子組件。

(render 10 of these:) 
<div i start> 
    <div start reusable wrapper> 

     <child component - one of ten different components, one after the other> 

    <div end reusable wrapper 

<div i end> 

我只是需要一個高層次的建議。我覺得我所想的一切都是'黑客攻擊'。

Answer 1

const Layout = props => (
    <div whateverattributes> 
    <div whateverotherattributes> 
     {props.children} 
    </div> 
    </div> 
); 

然後

<Layout> 
    <ChildComponent /> 
</Layout>