React.js ¿Cómo representar el componente dentro del componente?

Question

Mar 13, 2016, 12:10 PM

React.js ¿Cómo representar el componente dentro del componente?

Estoy atascado. Tengo varios componentes separados en archivos separados. Si los renderizo en main.jsx como los siguientes:

ReactDOM.render(<LandingPageBox/>, document.getElementById("page-landing")); 
ReactDOM.render(<TopPlayerBox topPlayersData={topPlayersData}/>, document.getElementById("wrapper profile-data-wrapper"));
ReactDOM.render(<RecentGamesBox recentGamesData={recentGamesData}/>, document.getElementById("history wrapper"));

Todo funciona bien, pero me pregunto si es una buena práctica. Tal vez sea posible hacer algo como que solo haya un ReactDom.render como:

ReactDOM.render(<LandingPageBox recentGamesData={recentGamesData} topPlayersData={topPlayersData}/>, document.getElementById("page-landing"));

Intenté diferentes tipos de variaciones de LandingPageBox para incluir de alguna manera esos otros dos componentes, pero no tuve suerte. A veces se mostraban fuera de la página, etc. Pensé que debería verse así:

import React from 'react';
import RecentGames from '../RecentGames/RecentGames.jsx';
import TopPlayers from '../TopPlayers/TopPlayers.jsx';
import PageTop from './PageTop.jsx';
import PageBottom from './PageBottom.jsx';

class LandingPageBox extends React.Component {
    render() {
        return (
            <body className="page-landing">
                <PageTop>
                     <TopPlayers topPlayersData={this.props.topPlayersData} />
                </PageTop>
                <PageBottom>
                        <RecentGames recentGamesData=    {this.props.recentGamesData}/>
                    </PageBottom>              
                </body>
            );
        }
    }

export default LandingPageBox;

Pero este código solo representa PageTop y PageBottom, sin componentes de jugador o juego.

Entonces, mi pregunta sería, ¿cómo configurar el archivo LandingPageBox para que el componente TopPlayers se procese dentro del componente PageTop y el componente RecentGames se procese dentro del componente PageBottom? Gracias.

Deja tu comentario