React.js Wie rendere ich eine Komponente in einer Komponente?
Ich stecke fest. Ich habe mehrere separate Komponenten für separate Dateien. Wenn ich sie in main.jsx wie folgt rendere:
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"));
Alles funktioniert gut, aber ich frage mich, ob es eine gute Übung ist? Vielleicht ist es möglich so etwas zu machen, als gäbe es nur einen ReactDom.render wie:
ReactDOM.render(<LandingPageBox recentGamesData={recentGamesData} topPlayersData={topPlayersData}/>, document.getElementById("page-landing"));
Ich habe verschiedene Arten von LandingPageBox-Varianten ausprobiert, um diese beiden anderen Komponenten irgendwie einzuschließen, hatte aber kein Glück. Sie werden manchmal außerhalb der Seite gerendert und so weiter. Ich dachte, es sollte ungefähr so aussehen:
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;
Aber dieser Code rendert nur PageTop und PageBottom ohne Player- oder Spielkomponenten.
Also meine Frage wäre, wie man die LandingPageBox-Datei so einrichtet, dass die TopPlayers-Komponente in der PageTop-Komponente und die RecentGames-Komponente in der PageBottom-Komponente gerendert wird. Vielen Dank