React.js Как визуализировать компонент внутри компонента?
Я застрял. У меня есть несколько отдельных компонентов в отдельных файлах. Если я рендеринг их в main.jsx, как показано ниже:
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"));
Все отлично работает, но мне интересно, хорошая ли это практика? Возможно, можно сделать что-то вроде того, что будет только один ReactDom.render, например:
ReactDOM.render(<LandingPageBox recentGamesData={recentGamesData} topPlayersData={topPlayersData}/>, document.getElementById("page-landing"));
Я пробовал разные варианты вариантов LandingPageBox, чтобы как-то включить эти два других компонента, но безуспешно. Они иногда отображаются за пределами страницы и так далее. Я думал, что это должно выглядеть примерно так:
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;
Но этот код отображает только PageTop и PageBottom, без компонентов игрока или игры.
Итак, мой вопрос заключается в том, как настроить файл LandingPageBox, чтобы компонент TopPlayers отображался внутри компонента PageTop, а компонент RecentGames отображался внутри компонента PageBottom? Спасибо.