如何管理陣營路由器組件

所有的佈局：如何管理陣營路由器組件

我非常新反應路由器，當我跟隨this great tutorial，有一件事我無法找到答案，那就是：

哪有我調整佈局以決定窗口中的哪個區域可以正確渲染，該教程中討論的組件結構更像是內容的邏輯結構，但不是太多相關的UI佈局/樣式。

任何人都可以告訴我一個簡單的例子，關於如何將樣式應用到相應的組件，以確保它們在正確的位置？

謝謝

來源

2016-04-20 Kuan

我不明白你的問題。只需在你的觀點中添加課程？ '

{this.props.children}

' – azium

@azium謝謝，我想我誤解了路由器的工作原理 – Kuan

您的組件應該知道如何做到這一點。使用父組件來控制他們的子女的位置。例如，我用我的應用程序的通用模式是類似於：

var Nav = React.createClass({ 
    render() { 
    return (
     {'I am the Nav bar'} 
    ); 
    } 
}); 

var RightContent = React.createClass({ 
    render() { 
    return (
     {'I am Right Content'} 
    ); 
    } 
}); 

var LeftContent = React.createClass({ 
    render() { 
    return (
     {'I am Left Content'} 
    ); 
    } 
}); 

import {Col, Row} from 'react-bootstrap'; 
var Content = React.createClass({ 
    render() { 
    return (
     <Row> 
     <Col md={6}> 
      <LeftContent /> 
     </Col> 
     <Col md={6}> 
      <RightContent /> 
     </Col> 
     </Row> 
    ); 
    } 
}); 

var App = React.createClass({ 
    render() { 
    return (
     <div> 
     <Nav /> 
     {this.props.children} 
     </div> 
    ); 
    } 
});

這裏你可以看到每個組件是放置其子承擔全部責任。通常情況下，最好有父級組件進行佈局，然後是實際具有內容的子組件。

就每個組件的樣式而言，您可以直接在組件層上應用CSS（討論範圍不在此問題的範圍之內），或者您可以繼續使用常規的全局CSS樣式表 - 只需考慮每個組件作爲div，可能或可能不在頁面上。

來源

2016-04-20 15:56:42

感謝，所以React Router的工作方式就是簡單地使用分配給它的組件，並在應用該路由時替換該組件的HTML。那麼只要注意那個組件的外觀就足夠了。在Angular中沒有像ui-view這樣的東西來指定渲染的位置 – Kuan

React路由器只是描述哪個組件應該渲染路徑。該組件可能會或可能不會使用其他子組件來幫助渲染。其中一些子組件可能通過React Router傳遞給它，因此使用'this.props.children'。從下到上反應渲染：所有子組件的渲染將在父組件的渲染之前調用和解析。 –

如何管理陣營路由器組件

回答

相關問題