所有的佈局:如何管理陣營路由器組件
我非常新反應路由器,當我跟隨this great tutorial,有一件事我無法找到答案,那就是:
哪有我調整佈局以決定窗口中的哪個區域可以正確渲染,該教程中討論的組件結構更像是內容的邏輯結構,但不是太多相關的UI佈局/樣式。
任何人都可以告訴我一個簡單的例子,關於如何將樣式應用到相應的組件,以確保它們在正確的位置?
謝謝
所有的佈局:如何管理陣營路由器組件
我非常新反應路由器,當我跟隨this great tutorial,有一件事我無法找到答案,那就是:
哪有我調整佈局以決定窗口中的哪個區域可以正確渲染,該教程中討論的組件結構更像是內容的邏輯結構,但不是太多相關的UI佈局/樣式。
任何人都可以告訴我一個簡單的例子,關於如何將樣式應用到相應的組件,以確保它們在正確的位置?
謝謝
您的組件應該知道如何做到這一點。使用父組件來控制他們的子女的位置。例如,我用我的應用程序的通用模式是類似於:
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
,可能或可能不在頁面上。
感謝,所以React Router的工作方式就是簡單地使用分配給它的組件,並在應用該路由時替換該組件的HTML。那麼只要注意那個組件的外觀就足夠了。在Angular中沒有像ui-view這樣的東西來指定渲染的位置 – Kuan
React路由器只是描述哪個組件應該渲染路徑。該組件可能會或可能不會使用其他子組件來幫助渲染。其中一些子組件可能通過React Router傳遞給它,因此使用'this.props.children'。從下到上反應渲染:所有子組件的渲染將在父組件的渲染之前調用和解析。 –
我不明白你的問題。只需在你的觀點中添加課程? '
@azium謝謝,我想我誤解了路由器的工作原理 – Kuan