zoukankan      html  css  js  c++  java
  • react里面 react-router4 跳转

    在react里面跳转的时候,一般可以用

    <Link to='/tradeList' />

    但是我们在运用组件组合的时候经常会通过传参去判断,如果props传过来是参数,如果有link进行跳转,没有link,不跳转或者其他操作

    我是这样尝试的

    <Link to={this.props.link ? this.props.link : '/'} />

    有link的时候确实会跳转,没有link的时候,卧槽,报错了

    那就换种方式,通过js里面去控制

    第一种方式

    linkTo(){
        Modal.info({
            title:'正在开发,敬请期待 ...',
            onOk() {}
          });
    }
    
    
    colDom(data){
        if(!data.link){
            return(
                <Col span={4} align='middle' onClick={this.linkTo.bind(this, data.link)}>
                    <Icon type={data.iconText} className={data.color} />
                    <div className='mt5'>{data.txt}</div>
                </Col>
            )
        }
        return(
            <Col span={4} align='middle'>
                <Link to={data.link}>
                    <Icon type={data.iconText} className={data.color} />
                    <div className='mt5'>{data.txt}</div>
                </Link>
            </Col>
        )
    }
    
    
    {this.colDom(dataArr)}

    第二种方式

    import { withRouter } from 'react-router-dom';
    
    class BothSides extends React.Component{
        constructor(props){
            super(props);
        }
        linkTo(link){ 
            if(link){
                this.props.history.push(link);
            }
        }
        render(){
            let data = this.props.data;
            return(
                <div onClick={this.linkTo.bind(this,data.link)}>hello</div>
            )
        }
    }
    
    export default withRouter(BothSides);
  • 相关阅读:
    大数据之 Spark
    设计模式之——外观or门面模式
    架构设计
    Spring
    高并发系列之——负载均衡,web负载均衡
    高并发系列之——原子性和可见性
    高并发系列之——缓存中间件Redis
    mybatis
    JVM读书笔记
    mybatis中一对一关系映射
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9025844.html
Copyright © 2011-2022 走看看