标签:传参 ide ret ons lis component image inf type
在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);
标签:传参 ide ret ons lis component image inf type
原文地址:https://www.cnblogs.com/wzndkj/p/9025844.html