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

【问题标题】：React.js How to render component inside component?React.js 如何在组件内渲染组件？
【发布时间】：2016-06-28 10:13:52
【问题描述】：

我被困住了。我在单独的文件中有几个单独的组件。如果我将它们呈现在 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 组件中？谢谢。

【问题讨论】：

你为什么不用this.props.children？
我尝试阅读它，但我就是无法理解这个概念。如果我有这个例子中的两个，React 如何知道使用哪个孩子？另外也许我也不清楚一件事，那就是应该先渲染页面，然后在其中渲染这两个组件，因为页面组件有容器，这些组件必须放在其中。

标签： javascript reactjs

【解决方案1】：

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

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

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

在此处阅读更多信息 - https://facebook.github.io/react/docs/multiple-components.html

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

【讨论】：

也许你可以告诉我在我的例子中把 {this.props.children} 放在哪里？我对 React.js 很陌生。
很好的参考资料！
花了几个小时后，我终于找到了这个！谢谢老哥！

【解决方案2】：

在你的例子中

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} 以合适的方式显示它们的嵌套组件。

【讨论】：

谢谢。很好的解释。一切都像魅力一样。

【解决方案3】：

这里 Car 组件位于另一个组件内，即 Garage 组件。当 Garage 组件在渲染 Car 组件时也被渲染。与另一个函数中的一个函数相同的概念。

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

【讨论】：