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组件内部渲染,而最近的Games组件将在PageBottom组件内部渲染?谢谢。
-
在你的例子中
return ( <body className="page-landing"> <PageTop> <TopPlayers topPlayersData={this.props.topPlayersData} /> </PageTop> <PageBottom> <RecentGames recentGamesData= {this.props.recentGamesData}/> </PageBottom> </body> );
正如您已经发现的那样,React将仅呈现顶级自定义组件
PageTop
和PageBottom
。其他组件(TopPlayers
和RecentGames
)
嵌套
在这些组件中。那是什么意思?React不仅仅显示那些嵌套的组件,因为它不知道如何做到这一点。相反,所有渲染都必须由外部组件PageTop
和完成PageBottom
。React只是将嵌套的组件传递给它们(PageTop
获取TopPlayers
,PageBottom
获取RecentGames
)this.props.children
。现在
由外部组件
决定如何处理这些嵌套组件。在您的示例中,您将修改PageTop
和PageBottom
组件,以用于{this.props.children}
以合适的方式显示其嵌套组件。