React.js Как визуализировать компонент внутри компонента?

Я застрял. У меня есть несколько отдельных компонентов в отдельных файлах. Если я вынести их в main.jsx как следующее:React.js Как визуализировать компонент внутри компонента?

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

Я пробовал разные виды variatons от 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? Спасибо.

источник

2016-03-13 R. Vait

Почему вы не используете 'this.props.children'? –

Я пробовал читать об этом, но я просто не понимаю концепцию. Как React знает, какой ребенок использовать, если у меня есть, как в этом примере два? Кроме того, возможно, я тоже не понял, что эта страница должна быть визуализирована первой, а затем внутри нее должны быть отображены эти два компонента, потому что в компонентах страницы есть контейнеры, в которых эти компоненты должны быть помещены. –

В вашем примере

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

Реагировать только делают пользовательские компоненты верхнего уровня PageTop и PageBottom, как вы уже выяснили. Другие компоненты (TopPlayers и RecentGames) являются вложенными в пределах этих компонентов. Что это значит? React не просто отображает те вложенные компоненты, потому что он не знает, как это сделать. Вместо этого весь рендеринг должен выполняться внешними компонентами PageTop и PageBottom. React просто передает вложенные компоненты к ним (PageTop получает TopPlayers, PageBottom получает RecentGames) в this.props.children. Теперь это до внешних компонентов что делать с этими вложенными компонентами. В вашем примере вы должны изменить компоненты PageTop и PageBottom, чтобы использовать {this.props.children}, чтобы отобразить их вложенные компоненты соответствующим образом.

источник

2016-03-13 13:11:10 Nicole

Спасибо. Очень хорошее объяснение. Все работает как шарм. –

Вы правы. Вы можете использовать столько вложенных компонентов, сколько хотите. Это одна из основных концепций реакции. Доступ к ним можно получить в 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

источник

2016-03-13 11:25:39

Может быть, вы могли бы показать мне, где положить {this.props.children} в моем примере? Я очень новичок в React.js. –

Отличные ссылки! –

Проведя часы, и я наконец нашел это! Спасибо друг! –

React.js Как визуализировать компонент внутри компонента?

ответ

Смежные вопросы