React 过渡动画 路由 ui

过渡动画

1. 下载react-transition-group

cnpm i react-transition-group --save

1. CSSTransition实现单元素过渡动画 (1) unmountOnExit:退出时实现卸载该组件，该属性必须添加 (2) in:控制元素显示状态的 state 状态数据 (3) timeout:过渡动画效果持续时间，单位为毫秒 (4) classNames:指定过渡动画类名前缀(需要自定义两组四个过渡动画需要的 css 类选择器) (5) onEnter:元素进入前的回调函数，按需添加 (6) onEntering:元素进入中的回调函数，按需添加 (7) onEntered:元素进入后的回调函数，按需添加 (8) onExit:元素离开前的回调函数，按需添加 (9) onExiting:元素离开中的回调函数，按需添加 (10) onExited:元素离开后的回调函数，按需添加

import React, { Component } from 'react'
import './box.css'
// 1.导出CSSTransition组件
import {CSSTransition} from 'react-transition-group'
export default class Box1 extends Component {
    constructor(){
        super()
        this.state = {
            isShow:true,//控制元素的显示和隐藏
            btnName:'隐藏'
        }
    }
    render() {
        return (
            

                this.setState({btnName:'隐藏'})}
                    onExited={()=>this.setState({btnName:'显示'})}
                >
                    
单元素动画效果
                
 
 
                this.setState({isShow:!this.state.isShow})}>{this.state.btnName}
            
        )
    }
}

1. TransitionGroup实现列表元素动画效果

import React, { Component } from 'react'
import './box.css'
import {CSSTransition,TransitionGroup} from 'react-transition-group'
export default class Box2 extends Component {
    constructor(){
        super()
        this.state = {
            list:[
                {id:1,name:'vue'},
                {id:2,name:'react'},
                {id:3,name:'angular'},
            ],
            isShow:true,
 
        }
    }
    render() {
        const {list} = this.state
        return (
            

                {/* 
                TransitionGroup:需要将遍历的列表进行包裹
                CSSTransition:需要将遍历的每一项进行包裹
                 */}
                 
                     {list.map(item=>(
                         
                            

                                
{item.name}
                                this.del(item.id)}>移除
                            
                         
                     ))}
                 
            
        )
    }
 
    del(id){
       let list =  this.state.list.filter(item=>item.id!==id)
       this.setState({list})
    }
}

1. SwitchTransition实现切换效果

如果要实现让一个元素以过渡动画方式离开之后，再让另外一个元素以过渡动画方式进 入;或者新元素以过渡动画方式进入之后，再以过渡动画方式移除旧元素的切换动画效果， 就可以使用 SwitchTransition 组件来实现。

import React, { Component } from 'react'
import './box.css'
import {SwitchTransition,CSSTransition} from 'react-transition-group'
export default class Box3 extends Component {
    constructor(){
        super()
        this.state = {
            status:true,//状态
        }
    }
    render() {
        return (
            

                
                 node.addEventListener("transitionend", done, false)}
                    classNames='slide'>
                        this.setState({status:!this.state.status})}>{this.state.status ? "Goodbye, world!" : "Hello, world!"}
                
                
            
        )
    }
}

react-router-dom路由模块

react-router-dom 是 react 官方提供的一个基于 react 的路由模块，但是 react-router-dom 是一个独立的模块，需要单独下载安装才能够使用。

1. 下载

cnpm i react-router-dom --save

1. 路由实现流程

• Switch

  {/* 路由出口 */}
  
​
  

• HashRouter：带有#

• BrowserRouter ：常用的方式，不带#

1. 路由规则

• Route

  path:浏览器中访问的地址 component:访问的组件 exact:精准匹配，不能用在父路由上 strict:严格模式 需要结合exact属性一起使用才能有效。检查地址最后有没有斜线

1. 404路由

当用户访问一个不存在的路由时,就会显示一个默认的页面,404页面.

{/* 404页面 */}

{/* 404页面的处理，当用户输入了错误地址时，前面的路由都没有匹配成功，就会重定向到一个固定的页面 */}

1. 路由导航

• Link

{/* 导航链接 */}
首页 |
关于我们

• NavLink

 首页 |
 关于我们

• NavLink

  • activeClassName:选中的样式

  • activeStyle:选中的样式

  • exact:精准匹配

  • to: 必填项 to:要跳转的路由

• 路由组件和非路由组件 包裹在Route组件里的是路由组件，可以使用路由相关的熟悉和方法。没有包裹在Route组件里的是非路由组件，比如App这个组件。需要通过withRouter这个高阶组件，转换为路由组件使用。

1. 编程式导航

  // this.props.history.push(url); // push是在历史记录新增一条记录
  // this.props.history.replace(url); // replace是用新的记录替换老的记录
  // this.props.history.go(1); // go里面的参数是非零的整数，大于零表示前进，小于零表示后退
  // this.props.history.goBack(); // 后退一页
  // this.props.history.goForward(); //  前进一页

1. search传参

• URLSearchParams

// URLSearchParams传参，不用安装其他内容
let search = new URLSearchParams(this.props.location.search)
console.log(search.get('id'));
console.log(search.get('title'));

• querystringify.parse

 // 方式二,需要安装querystringify
 let params = querystringify.parse(this.props.location.search)

1. 动态路由

修改路由规则
 
  
 获取参数
 console.log(this.props.match.params);

1. 路由懒加载

步骤:

• React.lazy()

// 懒加载模式
const Home = React.lazy(()=>import('./pages/Route/Home'))

• React.Supense(fallback)

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
ReactDOM.render(
  loading...}>
    
  
    
,
  document.getElementById('root')
);
 

1. 路由嵌套

render() {
  return (
    

      
我是一个大的页面，包含了一些会切换的子页面
      small1
      small2
      small3
      

      Primary Button
      Default Button
      
        {/* 路由组件中要写完整的路径，不能只写子路由 */}
        {/* 不要在父路由中写exact，要放在子路由中 */}
        
        
        
      
    
  )

antd

1. 下载

cnpm i antd --save

1. 使用

入口文件index.css
import 'antd/dist/antd.css'; 

import React, { Component } from 'react'
import { Button } from 'antd';
export default class Index extends Component {
  render() {
    return (
       

            Primary
            Default     
       

    )
  }
}