过渡动画
-
下载react-transition-group
cnpm i react-transition-group --save
-
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 ( <div> <CSSTransition unmountOnExit in={this.state.isShow} timeout="500" classNames="fade" onEntered={()=>this.setState({btnName:'隐藏'})} onExited={()=>this.setState({btnName:'显示'})} > <h1>单元素动画效果</h1> </CSSTransition> <button onClick={()=>this.setState({isShow:!this.state.isShow})}>{this.state.btnName}</button> </div> ) } }
-
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 ( <div> {/* TransitionGroup:需要将遍历的列表进行包裹 CSSTransition:需要将遍历的每一项进行包裹 */} <TransitionGroup> {list.map(item=>( <CSSTransition key={item.id} unmountOnExit in={this.state.isShow} timeout={500} classNames="fade" > <div style={{display:'flex',justifyContent:'space-between',borderBottom:'1px solid #999'}}> <h3>{item.name}</h3> <button onClick={()=>this.del(item.id)}>移除</button> </div> </CSSTransition> ))} </TransitionGroup> </div> ) } del(id){ let list = this.state.list.filter(item=>item.id!==id) this.setState({list}) } }
-
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 ( <div> <SwitchTransition> <CSSTransition key={this.state.status ? "Goodbye, world!" : "Hello, world!"} addEndListener={(node, done) => node.addEventListener("transitionend", done, false)} classNames='slide'> <button onClick={()=>this.setState({status:!this.state.status})}>{this.state.status ? "Goodbye, world!" : "Hello, world!"}</button> </CSSTransition> </SwitchTransition> </div> ) } }
react-router-dom路由模块
react-router-dom 是 react 官方提供的一个基于 react 的路由模块,但是 react-router-dom 是一个独立的模块,需要单独下载安装才能够使用。
-
下载
cnpm i react-router-dom --save
-
路由实现流程
-
Switch
{/* 路由出口 */} <Switch> </Switch>
-
HashRouter:带有#
-
BrowserRouter :常用的方式,不带#
-
路由规则
-
Route
path:浏览器中访问的地址 component:访问的组件 exact:精准匹配,不能用在父路由上 strict:严格模式 需要结合exact属性一起使用才能有效。检查地址最后有没有斜线
-
404路由
当用户访问一个不存在的路由时,就会显示一个默认的页面,404页面.
{/* 404页面 */} <Route path="/notfound" component={NotFound}></Route> {/* 404页面的处理,当用户输入了错误地址时,前面的路由都没有匹配成功,就会重定向到一个固定的页面 */} <Redirect to="/notfound"></Redirect>
<Route path="*" component={NotFound}></Route>
-
路由导航
-
Link
{/* 导航链接 */} <Link to="/">首页</Link> | <Link to="/about">关于我们</Link>
-
NavLink
<NavLink exact to="/" activeClassName="select">首页</NavLink> | <NavLink exact to="/about" activeClassName="select">关于我们</NavLink>
-
NavLink
-
activeClassName:选中的样式
-
activeStyle:选中的样式
-
exact:精准匹配
-
to: 必填项 to:要跳转的路由
-
-
路由组件和非路由组件 包裹在Route组件里的是路由组件,可以使用路由相关的熟悉和方法。没有包裹在Route组件里的是非路由组件,比如App这个组件。需要通过withRouter这个高阶组件,转换为路由组件使用。
-
编程式导航
// 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(); // 前进一页
-
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)
-
动态路由
修改路由规则 <Route exact strict path="/goodsDetail/:id" component={NewsDetail}></Route> 获取参数 console.log(this.props.match.params);
-
路由懒加载
步骤:
-
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( <React.Suspense fallback={<h1>loading...</h1>}> <App /> </React.Suspense> , document.getElementById('root') );
-
路由嵌套
render() { return ( <div> <p>我是一个大的页面,包含了一些会切换的子页面</p> <NavLink to="/layout/small1">small1</NavLink> <NavLink to="/layout/small2">small2</NavLink> <NavLink to="/layout/small3">small3</NavLink> <br /> <Button type="primary">Primary Button</Button> <Button>Default Button</Button> <Switch> {/* 路由组件中要写完整的路径,不能只写子路由 */} {/* 不要在父路由中写exact,要放在子路由中 */} <Route exact path="/layout/small1" component={Small1}></Route> <Route exact path="/layout/small2" component={Small2}></Route> <Route exact path="/layout/small3" component={Small3}></Route> </Switch> </div> )
antd
-
下载
cnpm i antd --save
-
使用
入口文件index.css import 'antd/dist/antd.css';
import React, { Component } from 'react'
import { Button } from 'antd';
export default class Index extends Component {
render() {
return (
<div>
<Button type="primary">Primary</Button>
<Button>Default</Button>
</div>
)
}
}