React使用小技巧

1. React 中Toast的使用
方法所在文件夹：node_modules/antd-mobile/lib/toast/index.d.ts
导入： import { List, Button, Modal, Toast } from 'antd-mobile';
使用： Toast.info('解绑？', 1);//参1，提示；参2，显示的秒数
                      show/info/success/fail/offline/loading/hide/config

2. 页面跳转传值 
使用this.props.history.push方法
this.props.history.push({ pathname: '/path', state: { devId:'abc' } });
pathname：写跳转界面的路径
state：要传过去的数据

新页面取值：
this.props.location.state.devId

调试时，刷新页面，会报错：devId未定义，此时应加上this.props.location.state的空值判断

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      devId : ''
    };
  }
 
  componentWillMount(){
    //if(this.props.location.state){
    const {location} = this.props;
    if (location && typeof(location.state) !== 'undefined') {
      this.setState({
        devId : this.props.location.state.devId,
      })
    }
  }
}  

3. 

定位要和边偏移搭配使用，比如 top: 100px; left: 30px; 等等

边偏移:top/bottom/left/right   //right右侧偏移量，定义元素相对于其父元素右边线的距离

4.

img属于行内块元素，要想img靠右，要用div包裹，同时给div和img设置同样的宽高，这样img就是想要的尺寸了，用margin-right定位右边距

 
	  


.left-icon {
    width: 50px;
    height: 50px;
}
.test-div {
    width: 50px;
    height: 50px; 
    background: #000;
    /* margin: 0 auto; */
    float: right;
    margin-right: 10px;
}	

5. 用margin：auto实现垂直居中

.father {
    width: 300px; height:150px;
    position: relative;
}
.son {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 200px; height: 100px;
    margin: auto;
}

6.手机端调试小工具 vConsole
根index.js中找到

附近添加：