Podría ser una pregunta tonta, pero me preguntaba si hay alguna forma de pasar un componente como accesorios a la etiqueta del componente. Algo como esto
const Main = (props) => { return ( <header> main </header> <Content> <{props.homePage} /> //this should be like this <Home /> </Content> <Footer> </Footer> ); };Tengo una página principal que contiene encabezado, contenido y pie de página y quiero cambiar dinámicamente el componente en el contenido. Pero cada vez que paso el componente como accesorios reaccionan, lo toman como texto sin procesar y me dan un error. Por favor, dígame si este método es el correcto o si tengo que usar otro.
Estuviste muy, muy cerca, debería verse algo como:
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
Como alternativa, y probablemente un poco más natural, es aprovechar a los niños:
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'));