- 博客(9)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 react-路由守卫和懒加载
路由守卫 自己封装 import React, { Component } from 'react' import {Route,Redirect} from 'react-router-dom' export default class MyRoute extends Component { render() { let user = sessionStorage.getItem('user'); return ( <div>
2021-05-12 14:57:49
116
原创 react-路由传参
路由传参 :传参 传递: <Route path="/movieDetail/:id" component={MovieDetail}></Route> {/* 方式二: 展示列表 Link*/} {movieList.map(item=>( <div key={item.id} style={{background:'hotpink'}}> <Link to={'/movieDetail/'+item.id}>电影名称:{item.
2021-05-12 14:57:13
70
原创 react-路由
路由 1.路由模式 HashRouter 访问方式: http://localhost:3000/#/ BrowserRouter 访问方式: http://localhost:3000 2.路由规则 路由出口 import {Switch} from 'react-router-dom' //一级路由出口 <Switch></Switch> 路由规则 import {Route} from 'react-router-dom' <Sw
2021-05-12 14:56:33
68
原创 react-ui框架(antd)
ui框架(antd) 1.安装antd cnpm i antd --save 2.使用图标,需要安装图标库 cnpm i @ant-design/icons --save 3.使用 index.js // 引入antd样式 import 'antd/dist/antd.css'; import React, { Component } from 'react' import Banner from '../components/Banner' import { Button,Divider,Space
2021-05-12 14:54:21
227
原创 react-轮播图
轮播图 https://www.npmjs.com/package/react-awesome-swiper 1.下载 npm install react-awesome-swiper --save 2.使用 components/Banner.jsx import React, { Component } from 'react' import AwesomeSwiper from 'react-awesome-swiper'; export default class Banner extends
2021-05-12 14:53:49
168
原创 react中的ref
ref 1.定义 用来操作普通DOM元素和子组件 2.操作普通DOM元素 方式一 {/* 方式一 */} <div ref="div"></div> <button className="btn btn-primary" onClick={()=>this.send()}>操作DOM元素</button> send(){ // console.log(this.refs.div); this.refs.div.
2021-05-12 14:53:11
125
原创 生命周期-react、
生命周期 1.定义 从创建到销毁的过程,就是一个生命周期 钩子函数:在某事某刻自动被触发的函数称之为钩子函数 2.创建阶段 componentWillMount 组件将要挂载 特点 可以操作数据 不能操作dom节点 执行次数:1次 render 渲染jsx模板 特点 可以操作数据 不能操作DOM节点 执行次数: 1次 componentDidMount 组件挂载完成 特点 可以操作数据 可以操作DOM节点 执行次数: 1次 3.更新阶段 shouldComp
2021-05-12 14:52:14
61
原创 react数据的双向绑定
双向数据绑定 双向数据绑定 import React, { Component } from 'react' export default class Form extends Component { constructor(){ super() this.state = { name:'王一博' } } change(e){ // 实现数据的双向绑定 this.setState
2021-05-12 14:51:42
123
原创 react中父传子，子传父和非父子通信
一.父子组件之间通信 1.父传子 父组件: 通过自定义属性进行传值 子组件: 通过this.props接收数据 父组件 import React, { Component } from 'react' import Child from './Child' export default class Parent extends Component { state = { name:'赵丽颖', age:30, } render() {
2021-05-12 14:51:03
239
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人