码迷,mamicode.com
首页 > 其他好文 > 详细

React类型检查

时间:2018-09-01 12:21:19      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:路径   nvm   安装包   pat   第一个   赋值   vue   available   replace   

类型检查

import PropTypes from ‘prop-types‘

类名==List
List.propTypes = {
    list: PropTypes.array
}

// 默认值
List.defaultProps = {
    list:[]
}

props:

1.只读不能修改(不能再赋值表达式左边)
    2.ComponentWillReceiveProp()
    3.propTypes
    4. defaultProps
    5.children

web > native

native 需要下载安装包
// react-router-dom

web  直接有的
//react-router-native

nvm

命令说明
nvm list available 查看所有版本
nvm install 版本号 下载
nvm list 列出当前可用的包
nvm use 版本号 使用哪一个包
history 历史

路由模式

Vue使用hash模式
React 使用两种模式

HashRouter
# 哈希模式(HashRouter)  锚点 

浏览器端忽略#(无法把#及之后带过去)

browserRouter 
    路由localhost地址
    访问地址不存在,进行重定向
    
Node起服务

路由

1.下载 react-router-dom

2.
import {
    HashRouter as Router,
    Link,
    Route,
    Switch
} from ‘ react-router-dom‘

3.<Router></Router>

<Switch>

    //当route不给path属性时会匹配任意路由
    <Router component={()=><h1>未匹配的路由</h1>}></Router> 无path匹配任何路由
    
    当redirect不给from属性时也会匹配任意路由
    <Redirect exact from=‘/‘ to=‘/index‘></Redirect>
</Switch>


Link, //导航标签 to属性声明要跳转的路径
Route,//占位标签,如果path与当前路径一模一样时才匹配
Switch // 返回匹配的第一个路由
exact 表示精准匹配,当path与当前路径一模一样时才匹配

传参

1.地址栏传参
‘/index/:id?‘ 传递变量
‘/index/10‘ 传递常量
‘/index?a=1&b=2‘ 直接传递数据

Link 标签的to属性
    to={{
        pathname:‘/cart‘,
        data:{a:1,b:2}
    }}
// 在location接收

回退版本

window.history.go(-1)

window.history.back()

透传

a => b => c
b只能接收a的值不能修改a的值

replace

有两种常见的渲染组件的方式:

component和render。前者是使用React.createElement方法新建一个元素,而后者仅仅是调用现有组件的render方法

React类型检查

标签:路径   nvm   安装包   pat   第一个   赋值   vue   available   replace   

原文地址:https://www.cnblogs.com/2oex/p/9569179.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!