react 代码片段

[mask2012]

router跳转，link跳转

import router from 'umi/router';
router.push({
                pathname: '/authrizeManage/basic-list',
                query: { operation: 'add' }
            });

query是参数，跳转的页面的写法就是 this.props.location.query.operation

参考 https://umijs.org/zh/api/#umi-router

循环里做异步

函数传参增加自己的参数

bizChart下载成图片

参考 https://www.jianshu.com/p/43f179c8c03b

table 滚动条引发的思考

在一个table很多列，出现横向滚动条时的处理

1. table 加上scroll属性，如 scroll={{ x: 1500 }} 如果不加，那么窗口变小时，各列会挤在一起
2. 不可以给在column那里给每一项都指定宽度，否则在大分辨率下会出现表格断裂(通过ctrl+-来模拟大分辨率)
3. 事先判断每一列可能出现的最大文字，把可能过长的列设定一个合理的宽度，其余的列不设宽度，让其自由伸缩

组件之间传值

子组件发射 emitter.emit('changeMessage', message); 父组件接收

componentDidMount() {
        // 组件装载完成以后声明一个自定义事件
        this.eventEmitter = emitter.addListener('changeMessage', (message) => {
            this.setState({
                message,
            });
        });
    }
    componentWillUnmount() {
        emitter.removeListener(this.eventEmitter);
    }

https://juejin.im/post/5a2cbc57f265da431523d6de、

父组件调用子组件里的方法

import React, {Component} from 'react';

export default class Parent extends Component {
    render() {
        return(
            <div>
                <Child onRef={this.onRef} />
                <button onClick={this.click} >click</button>
            </div>
        )
    }

    onRef = (ref) => {
        this.child = ref
    }

    click = (e) => {
        this.child.myName()
    }

}

class Child extends Component {
    componentDidMount(){
        this.props.onRef(this)
    }

    myName = () => alert('xiaohesong')

    render() {
        return ('woqu')
    }
}