Я не могу прочитать свойства детей, отправленных от родителя

Question

Я новичок в реакции. Я использую маршрутизатор и отправляю соответствующих детей на основе URL-адреса. Ниже приведена структура моего index.js:

class Tj extends React.Component { 
render() { 
    return (
     <Router history={browserHistory}> 
      <Route path={"/"} component={Bridge} > 
       <IndexRoute component={Home} /> 
       <Route path={"user"} component={T} /> 
       <Route path={"home"} component={Home} /> 
      </Route> 
      <Route path={"home"} component={Home} /> 
     </Router> 
    ); 
} 
} 
render(
    <Provider store={store}> 
    <Tj/> 
</Provider>, 
window.document.getElementById('mainContainer')); 

Пока все хорошо. Теперь мне нужно получить детей в bridge.js и решить выход для рендеринга на основе типа переданных детей.

import React from "react"; 
import {Header} from "../components/Header"; 
export class Bridge extends React.Component { 
render() { 
    var Content; 
    if(this.props.children.tag==="homeTag"){ 
    Content=<div> 
     <div className="row"> 
      <Header/> 
     </div> 
     <div className="row"> 
      {this.props.children} 
     </div> 
    </div>; 
     }else{ 
     some other code to render} 

    return (

     Content 

    ); 
} 
} 

Проблема начинается именно в этот момент. Поэтому здесь я проверяю тег, который я установил в каждом элементе, который я отправил в index.js, таком как Home.js, но хотя я установил тег для компонентов, он не определен. Ниже в Home.js:

class Home extends React.Component { 
render() { 
    return (
     <div> 
       <MainComp tag="homeTag"/> 
      </div> 
    ); 
    } 
} 

Как вы можете видеть, что я отправить тег в Home.js, но в bridhe.js, когда я пытаюсь читать это не определено. Может ли кто-нибудь помочь?

************* ОБНОВЛЕНИЕ ******************************** ********** Дополнительные пояснения: Я использую тег, чтобы иметь возможность различать тип компонента, который был отправлен. Может быть, было лучше, если бы я назвал его типом. Поэтому в bridge.js я проверяю тип компонента, и если это, например, компонент Home, я также показываю заголовок, если нет, то я просто показываю компонент, отправленный без какого-либо заголовка.

Answer 1

Я нашел решение для этого, и я, хотя это может стоить того, чтобы поделиться с тем, у кого есть такая же проблема. Я сделал глупую ошибку. Поэтому вместо того, чтобы проверить ребенка отправленное из шаблона, то лучше, чтобы определить другой маршрут с различными шаблон, такие как:

<Router history={browserHistory}> 
     <Route path={"/"} component={Bridge} > 
      <IndexRoute component={Home} /> 
      <Route path={"user"} component={T} /> 
      <Route path={"home"} component={Home} /> 
     </Route> 
     <Route path={"/"} component={Bridge2} > 
      <IndexRoute component={Test1} /> 
     </Route> 
     <Route path={"home"} component={Home} /> 
    </Router> 

Кроме того, для получения дополнительной информации, пожалуйста, посмотрите на эту ссылку: related answer