react-总结8-高级-第三方库实例化-ant desgin banner图-scss1像素兼容问题-一级路由-二级路由-编程式导航

最新推荐文章于 2021-04-17 12:00:07 发布

站好我去买橘子

最新推荐文章于 2021-04-17 12:00:07 发布

阅读量268

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/weixin_45413276/article/details/102691535

版权

react 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

react第三方库实例化

swiper

第三方库可以在有真实DOM的生命周期钩子函数里进行实例化
即 componentDidMount 和 componentDidUpdate 两个钩子函数里选一个
如果componentDidUpdate的话会有一个重复实例化的问题
如果选择在componentDidMount里进行，数据是通过请求来的话banner滑动会出现问题解决方法如下

下面选在componentDidMount里进行实例化 将实例化放进异步宏任务（放进延时定时器里）
componentDidMount(){
        fetch('../mock/img.json')
        .then(data => data.json())
        .then(res => {this.setState({
            banner:res
        })
        setTimeout(()=>{ //只实例化一次 放在异步宏任务  等数据请求完再实例化
            new Swiper ('.swiper-container', {
                // direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项
                
                // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                },
                
                // 如果需要前进后退按钮
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },
                
              })     
        },0)
    })

ant desgin banner图

蚂蚁金服的移动组件库的banner 会报一个滑动错误，在index.css加上
*｛touch-active:none}

scss1像素解决

@mixin border_bottom($color) {
    & {
      position: relative;
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        border-top: 1px solid $color!important;
        transform-origin: 0 0;
        // padding: 1px;
        box-sizing: border-box;
        pointer-events: none;
      }
      &:last-child:before {
        border-top:none;
      }
    }
    @media (-webkit-min-device-pixel-ratio:1),(min-device-pixel-ratio:1) {
      &:before {
        width: 100%;
        height: 100%;
        transform: scale(1);
      }
    }
    @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
      &:before {
        width: 200%;
        height: 200%;
        transform: scale(0.5);
      }
    }
    @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
      &:before {
        width: 300%;
        height: 300%;
        transform: scale(0.333);
      }
    }
}


@import '../../assets//border.scss';  在需要的scss文件里引入
 @include border_bottom( #ccc );     include 使用  传参

React路由

React router 3.x
React router 4.x[5]

不同之处 3.x是使用传统思想。统一配置路由，而4.x则不是，而是一个路由即一个组件

1、安装  yarn add react-router-dom / npm react-router-dom

import { Route } from 'react-router-dom'//引出路由展示区

<Route path = '/home' component = { Home }/>  Route 有一个component属性  里面放的是什么组件 展现的就是什么组件

一级路由

配置路由展示组件

import React,{ useState } from 'react'
import { Route,Switch,Redirect } from 'react-router-dom' //引出 路由展示区 switch 重定向
import Home from './pages/home'			//引入相应页面的组件
import Classify from './pages/classify'
import HotSale from './pages/hotsale'
import ShoppCar from './pages/shoppcar'
import Mine from './pages/mine'
import List from './pages/list'
import Detail from './pages/detail'
import Error from './pages/error'
// const Home = () => { import './pages/home' }  懒加载

const RouterComp = props => {
    const [routes] = useState([
        {
            id:1,
            path:'/home',
            component:Home,             
        },{
            id:2,
            path:'/classify',
            component:Classify,       
        },{
            id:3,
            path:'/hotsale',
            component:HotSale      
        },{
            id:4,
            path:'/shoppcar',
            component:ShoppCar,    
        },{
            id:5,
            path:'/mine',
            component:Mine,
        },{
            id:6,
            path:'list',
            component:List
        },{
            id:7,
            path:'/detail',
            component:Detail,
        },{
            id:8,				//错误路由配置  path为空
            path:'',
            component:Error
        }
    ])
    
    function renderRoutes(){
        return routes.map(item => (
            <Route 
            key = {item.id}
            path = { item.path }
            component = { item.component } 
            exact = { item.exact } //数据里可以没有 这边赋值一定得有  不然会影响二级路由
            />
        ))
    }

    return (
        //Switch组件一次只渲染一个Route
        //Route是一个路由展示组件，通过component属性来确定渲染哪一个组件
        //exact 完全匹配
        //Redirect 是重定向组件 from是来源 to是目标  exact 缺一不可
        <Switch>
            <Redirect from ="/" to = "/home" exact/>
            { renderRoutes() }
        </Switch>
    )
}

export default RouterComp
放在需要路由展示的地方即可

确认路由模式
在这里插入图片描述
将跳转的a标签换成 NavLink（激活状态）或 Link（无激活状态）

从'react-router-dom'中引出
import NavLink from 'react-router-dom'
import Link from 'react-router-dom'

在css或sass里通过$.active来改变激活状态的样式

实际操作

import React,{ Fragment,useState } from 'react'
import './index.scss'
import {NavLink } from 'react-router-dom'

const Tab = () => {
    const [ tabs ] = useState([
        {
            id:1,
            iconName:'fab fa-jedi-order',
            text:'首页',
            path:'/home'
        },{
            id:2,
            iconName:'fab fa-magento',
            text:'分类',
            path:'/classify'
        },{
            id:3,
            iconName:'fab fa-critical-role',
            text:'热卖',
            path:'/hotsale'
        },{
            id:4,
            iconName:'fab fa-gitlab',
            text:'购物车',
            path:'/shoppcar'
        },{
            id:5,
            iconName:'fab fa-github-alt',
            text:'我的',
            path:'/mine'
           
        }
    ])

    function showTab () {
        return tabs.map((item)=>(
            <li 
            key={item.id}
            >
                <NavLink to = { item.path }>
                    <i className={item.iconName}></i>
                    <span>
                        {item.text}
                    </span>
                </NavLink>
            </li>
        ))
    }

    return (
        <Fragment>
            <footer>
                <ul>
                    { showTab() }
                </ul>
            </footer>
        </Fragment>
    )
}

export default Tab

@import '../../assets/them.scss';
@import '../../assets//border.scss';

footer{
    @include border_bottom( #ccc );
    ul{
        display: flex;
        justify-content: space-around;
        height: .48rem;
        
        a{
            display: flex;
            flex-direction:column;
            color: black;
            &.active{
                i,span{
                    color:rgb(255, 1, 77);
                }
            }
    
            i{
                font-size: 0.24rem;
                padding-top: .05rem;
            }
            span{
                font-size: 0.14rem;
            }
            
        }
    }
}

二级路由

在需要二级路由的组件配置二级路由一个导航一个路由展示区步骤跟一级路由类似但是不需要Switch 可以全写出来只会渲染一个


需要二级路由的页面

import React,{ Fragment,useState } from 'react'
import { NavLink } from 'react-router-dom'
import './index.scss'
import Route from './subRoute.config'
// import One from './one'


const List = () => {
    const [nav] = useState([
        {
            id:1,
            text:'嘿嘿',
            path:'/list/one',
        },{
            id:2, 
            text:'呵呵',
            path:'/list/two',
        },{
            id:3,
            text:'嘻嘻',
            path:'/list/three',
    
        },{
            id:4,
            text:'哈哈',
            path:'/list/four',
    
        },{
            id:5,
            text:'哼哼',
            path:'/list/five',
    
        }
    ])

    function shouNav(){
        return (
            nav.map(item => (
                <NavLink
                    key = { item.id }
                    to = { item.path }>
                    <p>
                        {item.text}
                    </p>
                </NavLink>
            ))
        )
    }

    return (
        <Fragment>
            <div className='list-box'>
               <div className='nav-box'>
                {/* 导航 */}
                {  shouNav() }
               </div>
                {/* 路由展示区 */}
                <Route/>
            </div>
         </Fragment> 
    )
}

export default List

二级路由配置

import { Route } from 'react-router-dom' 
import React,{ useState,Fragment } from 'react'

import One from './one'
import Two from './two'
import Three from './three'
import Four from './four'
import Five from './five'



const SubRoutes = () => {
    const [subNav] = useState([
        {
            id:1,
            component:One,
            path:'/list/one',
        },{
            id:2, 
            component:Two,
            path:'/list/two',
        },{
            id:3,
            component:Three,
            path:'/list/three',
    
        },{
            id:4,
            component:Four,
            path:'/list/four',
    
        },{
            id:5,
            component:Five,
            path:'/list/five',
    
        }
    ])
    
    const showSN = () => {
        return subNav.map(item => (
            <Route
                key = { item.id }
                path = { item.path }
                component = { item.component }
                // exact
            />
        ))
    }

    return (
        <Fragment>
            { showSN() }
        </Fragment>
    )
}

export default SubRoutes

编程式导航

push
replace
当我们在费路由组件中要使用push和replace属性时，可以使用高阶组件withRouter，将一个非路由组件转化为伪路由组件，让它具备这个属性

import {withRouter} from 'react-router-dom'
withRouter(目标组件)

站好我去买橘子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react-总结8-高级-第三方库实例化-ant desgin banner图-scss1像素兼容问题-一级路由-二级路由-编程式导航

react第三方库实例化swiperReact路由React router 3.xReact router 4.x[5]不同之处 3.x是使用传统思想。统一配置路由，而4.x则不是，而是一个路由即一个组件...
复制链接

扫一扫