Pass компонент метка как реквизит в реакцию родного

Question

Это может быть глупым вопросом, но мне было интересно, есть ли способ, чтобы передать компонент в качестве реквизита для компонента tag.something как этого

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

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

<Footer> 
</Footer> 
); 
}; 

У меня есть основные страница, содержащая заголовок, содержимое и нижний колонтитул, и я хочу динамически изменять компонент в content.but, когда я передаю компонент в качестве реквизита, воспринимайте его как необработанный текст и дайте мне ошибку. Пожалуйста, скажите мне, подходит ли этот метод или я должен использовать другой способ.

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'));