React.js Router Rendering verschiedene Body Tags

Ich habe mehrere verschiedene reagieren Komponenten. Ich fing an, reagiere Router zu benutzen. Alles funktioniert gut, außer dass ich ein Problem nicht überwinden kann. Ich bin Rendering meine Komponenten index.html Datei, die wie folgt aussieht:React.js Router Rendering verschiedene Body Tags

<body> 
<div id="app"></div> 
</body>

ich id = "app" Rendering bin. Alles ist in Ordnung, wie ich erwähnte, aber das Problem ist, dass einige Komponenten unterschiedliche Körper Tags benötigen, weil sie mit Design verbunden ist, wie:

<body class="page-landing"> 
</body>

Ist es möglich, irgendwie Körper Optionen durch Router passieren? Oder gibt es eine andere Möglichkeit, dieses Problem zu lösen?

Quelle

2016-03-28 R. Vait

löste ich mein Problem:

componentDidMount() { 
    document.getElementsByTagName('body')[0].className = 'page-landing'; 
} 

componentWillUnmount() { 
    document.getElementsByTagName('body')[0].className = ''; 
}

Wenn Komponentenmontage ich tat, dass es Body-Tags Klasse ändert und wenn sie leer verlassen es Aushängen.

Quelle

2016-03-30 12:49:44

Stil ein div-Container für jede Komponente möchten Sie personalisierte CSS:

class LandingPage extends React.Component { 

    render() { 
     return (
      <div className="page-landing"></div> 
     ); 
    } 
}

und haben so etwas wie:

render((
    <Route path="/" component={MyApp}> 
     <IndexRoute component={LandingPage} /> 
     <Route path="about" component={About} /> 
    </Route> 
), document.getElementById('app'))

Lassen body verwalten nur css Sie über Ihre App global sein wollen.

Quelle

2016-03-28 20:01:53

Vielen Dank für Ihre Antwort, aber es hat nur teilweise mein Problem gelöst. Wenn ich meine Komponente mit div-Tags verpacke und den Körper leer lasse, bekomme ich eine große leere Box vor der Komponente. –

Sie müssen '' body''' leer lassen. Mach wie du und rende '' '

' '' drin. –

Sorry vielleicht war ich nicht ganz klar. Ich habe drei Komponenten: Login, LandingPage und GamePage. Login und LandingPage erfordern die Seiten-Landung im body-Tag. GamePage nicht. Wenn ich Seite-Landung im Index lasse, funktioniert Login und Landing gut, aber GamePage wird durcheinander gebracht. Wenn ich die Seiten-Landung entferne, funktioniert GamePage einwandfrei, aber Login und Landung nicht. Clearing-Körper, Wrapping Landing und Login mit den von Ihnen angebotenen divs haben die Dinge besser gemacht, aber nicht perfekt, weil ich nicht weiß warum, aber leerer schwarzer Raum erscheint vor den Komponenten Login und Landing Page, während alles darunter aussieht wie es sollte. –

React.js Router Rendering verschiedene Body Tags

Antwort

Verwandte Themen