ゼロからreactプロジェクトを構築する(二)

6375 ワード
react
ページを作成するには、各ページに接続するためにルーティングとtabbarコンポーネントが必要です.
(一)ルーティングの使用
実行:npm install react-router-dom--saveルーティングをインストールし、app.jsにはルーティング,およびページが導入される.次のように
import React from 'react';
import logo from './logo.svg';
import './App.css';

import Home from './pages/home/home'
import Mine from './pages/mine/mine'
import Trade from './pages/trade/trade'
import Peizi from './pages/peizi/peizi'
import Market from './pages/market/market'

import Login from './pages/login/login'
import Reg from './pages/login/reg'


import{ HashRouter as Router, Route, NavLink, Redirect} from 'react-router-dom';


class App extends React.Component {	//       
	constructor(props) {
		super(props)
		this.state = {
			
		}
	}	

	render() {
		return(
			
			    
			    
			    
			    
			    
			    
			    
			
		)
	}
}

export default App;

のexactは、指定したpathが'/'にアクセスしたときにのみ表示されることを示し、そうでない場合はルートパスにアクセスする必要がある場合にレンダリングされるコンポーネントのデフォルトはundefinedで、ページが空白になります.
ちなみにルートパス:(ここを参照)
1.params 

xxx
this.props.history.push({pathname:"/path/" + name});
     :this.props.match.params.name

利点:アドレスバーをリフレッシュすると、パラメータには依然として欠点があります.文字列しか伝達できません.また、伝達値が多すぎるとurlが長く醜くなります.
2、query 


this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
     : this.props.location.query.name

利点:伝参は優雅で、伝達パラメータは対象を伝達することができる.欠点:アドレスバーをリフレッシュし、パラメータが失われる
3、state 

xxx
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
     : this.props.location.search

長所と短所はquery
4、search 

xxx
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
     : this.props.location.search

長所と短所はparamsと同じ
(二)tabbarコンポーネントの作成とアイコンのハイライト
componentフォルダの下にtabbarを作成します.jsコンポーネントは、次のとおりです.
/*tabbar  */
import React from 'react';
import './tabbar.css'
import {NavLink} from 'react-router-dom'

import home_img from '../../assets/images/tabbar/home.png'
import home_fill_img from '../../assets/images/tabbar/home_fill.png'
import market_img from '../../assets/images/tabbar/market.png'
import market_fill_img from '../../assets/images/tabbar/market_fill.png'
import trade_img from '../../assets/images/tabbar/trade.png'
import trade_fill_img from '../../assets/images/tabbar/trade_fill.png'
import peizi_img from '../../assets/images/tabbar/peizi.png'
import peizi_fill_img from '../../assets/images/tabbar/peizi_fill.png'
import mine_img from '../../assets/images/tabbar/user.png'
import mine_fill_img from '../../assets/images/tabbar/user_fill.png'


class Tabbar extends React.Component{	//icon     
	constructor(props){
		super(props)
		this.state = {
			tabIndex: 0,
			tab: [{id: 0,name: '  ',path: '/',icon: ''},
			{id: 1,name: '  ',path: '/market',icon: 'tabbar-icon2'},
			{id: 2,name: '  ',path: '/trade',icon: 'tabbar-icon3'},
			{id: 3,name: '  ',path: '/peizi',icon: 'tabbar-icon4'},
			{id: 4,name: '  ',path: '/mine',icon: 'tabbar-icon5'}]
		}
	}
	
	componentDidMount(){
		//console.log(this.state)
	}
	
	render(){
		return (
			

				

				

					{this.state.tab.map((item,index)=>{
						return  
									
									
{item.name}

								
					})}
				

			

		)
	}
}

export default Tabbar

css：

.tabbar-box{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .22rem 0;
	background-color: #0C1537;
	z-index: 1;
}
.tabbar-item{text-align: center; margin: 0 .45rem; font-size: .22rem; color: #6D778F;}
.tabbar-icon{width: .32rem; height: .32rem;}
.light,.active .lights{color: #3974F9;}
.kong{height: 1.41rem;}


/* icon  */
.tabbar-icon1{
	display: inline-block;
	width: .32rem; 
	height: .32rem; 
	background-image: url(../../assets/images/tabbar/home.png);
	background-repeat: no-repeat;
	background-size: 100%;
}
.tabbar-icon2{background-image: url(../../assets/images/tabbar/market.png);}
.tabbar-icon3{background-image: url(../../assets/images/tabbar/trade.png);}
.tabbar-icon4{background-image: url(../../assets/images/tabbar/peizi.png);}
.tabbar-icon5{background-image: url(../../assets/images/tabbar/user.png);}

.active .tabbar-icon1{background-image: url(../../assets/images/tabbar/home_fill.png);}
.active .tabbar-icon2{background-image: url(../../assets/images/tabbar/market_fill.png);}
.active .tabbar-icon3{background-image: url(../../assets/images/tabbar/trade_fill.png);}
.active .tabbar-icon4{background-image: url(../../assets/images/tabbar/peizi_fill.png);}
.active .tabbar-icon5{background-image: url(../../assets/images/tabbar/user_fill.png);}

コンポーネントハイライトルーティングを使用すると、現在のルーティングラベルにactiveクラス名を付けて(ActiveClassNameでこのactiveクラス名を変更することもできます)、activeクラスの下のアイコンと文字をハイライトするように指定すればいいです.注意:トップページルーティングNAVLinkにexact属性を追加する必要があります.そうしないと、トップページはアクティブになります.
【プログラミング初心者】Swift練習問題~フィボナッチ数列~
【プログラミング初心者】Swift練習問題~繰り返し２~