Я застрял. У меня есть несколько отдельных компонентов в отдельных файлах. Если я рендеринг их в main.jsx, как показано ниже:

ReactDOM.render({amp}lt;LandingPageBox/{amp}gt;, document.getElementById("page-landing")); ReactDOM.render({amp}lt;TopPlayerBox topPlayersData={topPlayersData}/{amp}gt;, document.getElementById("wrapper profile-data-wrapper")); ReactDOM.render({amp}lt;RecentGamesBox recentGamesData={recentGamesData}/{amp}gt;, document.getElementById("history wrapper")); 

Все отлично работает, но мне интересно, хорошая ли это практика? Возможно, можно сделать что-то вроде того, что будет только один ReactDom.render, например:

 ReactDOM.render({amp}lt;LandingPageBox recentGamesData={recentGamesData} topPlayersData={topPlayersData}/{amp}gt;, 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 ( {amp}lt;body className="page-landing"{amp}gt; {amp}lt;PageTop{amp}gt; {amp}lt;TopPlayers topPlayersData={this.props.topPlayersData} /{amp}gt; {amp}lt;/PageTop{amp}gt; {amp}lt;PageBottom{amp}gt; {amp}lt;RecentGames recentGamesData= {this.props.recentGamesData}/{amp}gt; {amp}lt;/PageBottom{amp}gt; {amp}lt;/body{amp}gt; ); } } export default LandingPageBox; 

Но этот код отображает только PageTop и PageBottom, без компонентов игрока или игры.

Так что мой вопрос заключается в том, как настроить файл LandingPageBox, чтобы компонент TopPlayers отображался внутри компонента PageTop, а компонент RecentGames отображался внутри компонента PageBottom? Спасибо.

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

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

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

Вы правы. Вы можете использовать столько вложенных компонентов, сколько захотите. Это одна из основных концепций реагирования. Вы можете получить к ним доступ в this.props.children . Делай это так:

 var Parent = React.createClass({ render: function() { return {amp}lt;div{amp}gt;{this.props.children}{amp}lt;/div{amp}gt;; } }); ReactDOM.render( {amp}lt;Parent{amp}gt; {amp}lt;Child/{amp}gt; {amp}lt;Child/{amp}gt; {amp}lt;/Parent{amp}gt;, node ); 

Подробнее читайте здесь — https://facebook.github.io/react/docs/multiple-components.html

И здесь — http://buildwithreact.com/article/component-children

Здесь автомобильный компонент находится внутри другого компонента, т.е. гаражных компонентов. При рендеринге компонент Garage Car также отображается. Та же концепция, что и одна функция внутри другой функции.

 class Car extends React.Component { render() { return {amp}lt;h2{amp}gt;I am a Car!{amp}lt;/h2{amp}gt;; } } class Garage extends React.Component { render() { return ( {amp}lt;div{amp}gt; {amp}lt;h1{amp}gt;Who lives in my Garage?{amp}lt;/h1{amp}gt; {amp}lt;Car /{amp}gt; {amp}lt;/div{amp}gt; ); } } ReactDOM.render({amp}lt;Garage /{amp}gt;, document.getElementById('root')); 
Сантош Сутар

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,