反应.js如何在组件内部渲染组件

React.js How to render component inside component?

本文关键字：组件 内部 js 反应      更新时间：2023-09-26

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

在您的示例中

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 只是在 this.props.children 中将嵌套组件传递给它们（PageTop得到TopPlayers，PageBottom得到RecentGames）。现在由外部组件决定如何处理这些嵌套组件。在您的示例中，您将修改PageTop和PageBottom组件，以使用 {this.props.children} 以合适的方式显示其嵌套组件。

你是对的。您可以根据需要使用任意数量的嵌套组件。这是 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

这里的汽车组件位于另一个组件内部，即车库组件。当渲染汽车组件中的车库组件也渲染时。与一个函数在另一个函数中一样的概念相同。

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'));
相关文章：