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

Question

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

Run Code Online (Sandbox Code Playgroud)

一切正常,但我想知道这是一个好习惯吗？也许有可能做类似于只有一个ReactDom.render的事情:

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

Run Code Online (Sandbox Code Playgroud)

我尝试了不同种类的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;

Run Code Online (Sandbox Code Playgroud)

但是这段代码只渲染PageTop和PageBottom,没有播放器或游戏组件.

所以我的问题是,如何设置LandingPageBox文件,以便TopPlayers组件在PageTop组件内呈现,而RecentGames组件将在PageBottom组件内呈现？谢谢.

Answer 1

Nic*_*ole 34

在你的例子中

return (
        <body className="page-landing">
            <PageTop>
                 <TopPlayers topPlayersData={this.props.topPlayersData} />
            </PageTop>
            <PageBottom>
                 <RecentGames recentGamesData=    {this.props.recentGamesData}/>
            </PageBottom>              
        </body>
       );

Run Code Online (Sandbox Code Playgroud)

反应只会使顶级定制组件PageTop和PageBottom,因为你已经发现了.其他组件(TopPlayers和RecentGames)嵌套在这些组件中.那是什么意思？React不仅显示那些嵌套组件,因为它不知道如何执行此操作.相反,所有渲染必须由外部组件来完成PageTop和PageBottom.React只是将嵌套组件传递给它们(PageTop获取TopPlayers,PageBottom获取RecentGames)this.props.children.现在由外部组件决定如何处理这些嵌套组件.在您的示例中,您将修改要用于以合适方式显示其嵌套组件的PageTop和PageBottom组件{this.props.children}.

Answer 2

Dmi*_*rov 25

你是对的.您可以根据需要使用任意数量的嵌套组件.这是反应中的主要概念之一.你可以访问它们this.props.children.像这样做:

var Parent = React.createClass({
  render: function() {
    return <div>{this.props.children}</div>;
  }
});

ReactDOM.render(
  <Parent>
    <Child/>
    <Child/>
  </Parent>,
  node
);

Run Code Online (Sandbox Code Playgroud)

在这里阅读更多内容 - https://facebook.github.io/react/docs/multiple-components.html

在这里 - http://buildwithreact.com/article/component-children

归档时间：	9 年，8 月前
查看次数：	59206 次
最近记录：	9 年，8 月前