<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/tab.css">
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="../browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
// 創(chuàng)建APPTabNav組件
var AppTabNav = React.createClass({
// 狀態(tài)定義
getInitialState() {
return {
focusIndex: 0
};
},
// 修改焦點下標(biāo)
clickHandler(i) {
this.setState({
focusIndex: i
});
// 子調(diào)用父的函數(shù)給他傳值
this.props.change(i);
},
render() {
return (
<ul className="tab" id="tab-menu">
{
this.props.menuList.map((v, i) => {
return (
<li onClick={ this.clickHandler.bind(this, i) } className={ this.state.focusIndex == i? 'tab-item active': 'tab-item' } key={ v }>
<span>◆</span>{ v }
</li>
)
})
}
</ul>
)
}
});
// 在react中, 子組件給父組件傳遞數(shù)據(jù), 父可以給子傳一個函數(shù)過去, 子在需要的時候調(diào)用
// 其實這個實現(xiàn)本質(zhì)和vue子傳父有點像, vue中是父監(jiān)聽子的一個自定義事件, 子在需要的時候觸發(fā)事件函數(shù)被調(diào)用
var AppTab = React.createClass({
// 狀態(tài)定義
getInitialState() {
return {
focusIndex: 0
};
},
// 該方法會傳給子組件調(diào)用, 接收子的數(shù)據(jù)
changeIndex(i) {
this.setState({
focusIndex: i
});
},
render() {
return (
<div className="wrapper" id="wrapper">
<AppTabNav menuList={ this.props.menuList } change={ this.changeIndex }/>
<div className="products" id="tab-main">
{
this.props.mainList.map((v, i) => {
return (
<div className={ this.state.focusIndex == i? "main selected": "main" } key={ i }>
<a href="###"><img src={ v } alt=""/></a>
</div>
)
})
}
</div>
</div>
);
}
});
// 渲染AppTab組件
var menuList1 = [ '后端', '運維', '數(shù)據(jù)庫', '架構(gòu)師' ];
var menuList2 = [ 'web前端', 'android前端', 'ios前端', 'pc前端'];
var mainList1 = ['imgs/guojidapai.jpg', 'imgs/guojidapai.jpg', 'imgs/guojidapai.jpg', 'imgs/guojidapai.jpg'];
var mainList2 = ['imgs/guozhuangmingpin.jpg', 'imgs/qingjieyongpin.jpg', 'imgs/nanshijingpin.jpg', 'imgs/guozhuangmingpin.jpg'];
ReactDOM.render(
<div>
<AppTab menuList={ menuList1 } mainList={ mainList1 }/>
<AppTab menuList={ menuList2 } mainList={ mainList2 }/>
</div>
, document.querySelector('#app'));
</script>
</body>
</html>
01_13.抽取tab導(dǎo)航子組件_子傳父
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來侦铜，“玉大人专甩，你說我怎么就攤上這事”枚睿” “怎么了配深？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長嫁盲。 經(jīng)常有香客問我篓叶，道長，這世上最難降的妖魔是什么羞秤？ 我笑而不...
- 正文 為了忘掉前任缸托，我火速辦了婚禮，結(jié)果婚禮上瘾蛋，老公的妹妹穿的比我還像新娘俐镐。我一直安慰自己，他們只是感情好哺哼，可當(dāng)我...
- 文/花漫 我一把揭開白布佩抹。 她就那樣靜靜地躺著，像睡著了一般取董。 火紅的嫁衣襯著肌膚如雪棍苹。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼奥洼，長吁一口氣：“原來是場噩夢啊……” “哼巷疼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起溉卓，我...
- 正文 年R本政府宣布吱韭，位于F島的核電站吆豹，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏理盆。R本人自食惡果不足惜痘煤，卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望猿规。 院中可真熱鬧衷快，春花似錦、人聲如沸姨俩。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽环葵。三九已至调窍，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間积担，已是汗流浹背陨晶。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 1.新建子組件testSon.vue props是接收父類過來的對象數(shù)據(jù)雅镊，這里的default是如果父類沒有傳遞信...
- # 1：@Input 步驟： 1：父組件調(diào)用子組建時傳方法 2：在子組件引入Input 3：在子組件聲明，通過In...
