发表新帖
发表新帖

React.js How to render component inside component?

前端 未结
关注
3 651
轻奢々
轻奢々 2020-12-14 07:22

I am stuck. I have several seperate components on seperate files. If I render them in main.jsx like following: 

ReactDOM.render(, doc
相关标签:
3条回答
  • 南笙
    2020-12-14 07:41

    Here Car component is inside the another component i.e Garage components. When Garage component in rendering Car component is also renders. Same concept as like one function inside another function.

    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'));
    0 讨论(0)
  • 暗喜
    2020-12-14 07:50

    In your example

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

    React will only render the top-level custom components PageTop and PageBottom, as you already found out. The other components (TopPlayers and RecentGames) are nested within those components. What does that mean? React does not just display those nested components because it would not know how to do this. Instead, all rendering must be done by the outer components PageTop and PageBottom. React just passes the nested components to them (PageTop gets TopPlayers, PageBottom gets RecentGames) in this.props.children. Now it is up to the outer components what to do with these nested components. In your example, you would modify the PageTop and PageBottom components to use {this.props.children} to display their nested components in a suitable way.

    0 讨论(0)
  • 刺人心
    2020-12-14 07:52

    You are right. You can use as many nested components as you want. It's one of the main concepts in react. You can access them in this.props.children. Do it like this: 

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

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

    Read more here - https://facebook.github.io/react/docs/multiple-components.html

    And here - http://buildwithreact.com/article/component-children

    0 讨论(0)
 看不清?
提交回复
热议问题