Geek Answers Handbook

React.js How to visualize a component inside a component?

I am stuck. I have several separate components in separate files. If I do them in main.jsx as follows:

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

Everything works fine, but I think this is a good practice? Maybe you can do something like there will be only one ReactDom.render like:

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

I tried various types of variations of LandingPageBox to somehow incorporate these two other components, but no luck. They are sometimes displayed off-page and so on. I thought it should look something like this:

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;

But this code only displays PageTop and PageBottom, with no players or game components.

, , LandingPageBox, TopPlayers PageTop RecentGames PageBottom? .

+4
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}, .

+17

. , . . this.props.children. :

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

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

- https://facebook.imtqy.com/react/docs/multiple-components.html

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

+11

More articles:


All Articles