React.js Como renderizar um componente dentro de um componente?

Question

Mar 13, 2016, 12:10 PM

React.js Como renderizar um componente dentro de um componente?

Estou preso. Eu tenho vários componentes separados em arquivos separados. Se eu renderizá-los em main.jsx, como a seguir:

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

Tudo funciona bem, mas eu me pergunto se é uma boa prática? Talvez seja possível fazer algo como se houvesse apenas um ReactDom.render como:

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

Tentei diferentes tipos de variações do LandingPageBox para incluir de alguma forma esses outros dois componentes, mas não tive sorte. Às vezes, eles são renderizados fora da página e assim por diante. Eu pensei que deveria ser algo como isto:

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;

Mas esse código renderiza apenas PageTop e PageBottom, sem componentes de jogador ou jogo.

Portanto, minha pergunta seria: como configurar o arquivo LandingPageBox para que o componente TopPlayers seja renderizado dentro do componente PageTop e o componente RecentGames seja renderizado dentro do componente PageBottom? Obrigado.

leaveComments