通成分標籤作爲一個道具反應本地

Question

這可能是一個愚蠢的問題，但我不知道是否有任何的方式來傳遞一個組件作爲道具組件tag.something這樣

const Main = (props) => { 
return (
    <header> 
    main 
    </header> 

    <Content> 
    <{props.homePage} /> //this should be like this <Home /> 
    </Content> 

<Footer> 
</Footer> 
); 
}; 

我有一個主包含標題，內容和頁腳的頁面，我想動態更改內容中的組件。但是，每當我將該組件作爲道具傳遞時，請將其作爲原始文本進行傳遞，並給我一個錯誤信息。請告訴我，如果這種方法是正確的方式，或者如果我不得不使用另一種方式。

Answer 1

你是非常非常密切，它應該是這個樣子：

const Page1 = (props) => <div>my first page</div>; 

const Main = (props) => <div>{props.content}</div>; 

class App extends React.Component { 

    render() {           
    return (
     <div> 
      Header 
      <Main content={<Page1 />} /> 
      Footer 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<App/>,document.getElementById('root')); 

http://codepen.io/cjke/pen/VPYJpK?editors=0010

作爲替代，而且可能更自然一點是利用孩子：

const Page1 = (props) => <div>my first page</div>; 

const Main = (props) => <div>{props.children}</div>; 

class App extends React.Component { 

    render() {           
    return (
     <div> 
      Header 
      <Main><Page1 /></Main> 
      Footer 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<App/>,document.getElementById('root'));