路由react-router-dom 4.x

2019-04-12  本文已影响0人  开心就好_635d

1.react-router-dom中 路由用HashRouter或者BowserRouter,不需要再像之前的版本中在Router中指定history={xxx}

2.Main.js

      (1) <Link to="/index"/>//去寻找组件对应的

      (3){this.props.children}//(组件)路由加载的位置

    Router.js

       (2)<Route path="/index" component={Index}/> //找到对应的组件之后

3.当父层路由有子路由嵌套的时候,父层不能用精准匹配exact={true},否则加载不到子路由

4.

普通点击事件(以下两种调用和声明方式都可)

(1)<Button type="primary" onclick={this.howMessage}></Button>

showMessage=()=>{

message("恭喜你,REACT晋级成功");

}

(2)

<Button type="primary" onclick={()=>{this.howMessage}}></Button>

showMessage () {

message("恭喜你,REACT晋级成功");

}

(3)点击事件传参

<Button type="primary" onclick={()=>this.showMessage('success)}></Button>

showMessage=(type)=>{

message[type]("恭喜你,REACT晋级成功");

}

5.{}中必须是一个根对象,即只有一个父节点。

{<Icon type="plus"/>Tab 1}//不能这样写

{<span><Icon type="plus"/>Tab 1</span>}

6.学习Gallery图片画廊:结合card显示图片,用modal模态框实现图片预览

7.CheckBox初始化选中需要设置:valuePropName:'checked'  initialValue:true

8.const formItemLayout={

labelCol:{//标签文本占据的栅格数

    xs:24,

    sm:4

}

wrapperCol:{//文本框占据的栅格数

xs:24,

sm:20

}

}

9.<Form.Item label="用户名" {...formItemLayout}>//此处...三个点为es6语法的解构

</Form.Item>

10.yarn add moment --save//--save表示会在package.json中添加,不加--save,是指添加在本地

日期时间控件需要结合moment()方法来使用:(initialValue:moment('2018-02-23))

上一篇 下一篇

猜你喜欢

热点阅读