React.js如何在组件内部渲染组件？

轩辕弘雅

2023-03-14

问题内容：

我被困住了。我在单独的文件上有几个单独的组件。如果我在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}以合适的方式显示其嵌套组件。

React.js如何在组件内部渲染组件？

相关阅读

相关文章

相关问答

相关工具

相关文档