有条件地与 react-router Link 链接 [英] Conditionally linking with react-router Link

查看：21
本文介绍了有条件地与 react-router Link 链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的 React 组件中存在一种情况，即:如果 this.props.isComingFromModal 为 false，我希望在 Link 组件中添加一些元素.>

我做了什么(JSX):

<链接to={{ 路径名:`vendors/${benefit.vendor.id}`，状态:{ modal: false } }}><imgclassName="Benefit__vendor__thumb"src={benefit.vendor.tinyLogoUrl}alt="蓬托弗里奥"/><div className="Benefit__vendor__info"><h2 className="Benefit__vendor__title">{benefit.vendor.tradingName}</h2><div className="评级"><评级只读initialRate={benefit.vendor.rating}类名=评级"分数={2}empty="icon-rating icon-rating--empty fa fa-star fa-2x"full="icon-rating fa fa-star fa-2x"/>

</链接><其他/><imgclassName="Benefit__vendor__thumb"src={benefit.vendor.tinyLogoUrl}alt="蓬托弗里奥"/><div className="Benefit__vendor__info"><h2 className="Benefit__vendor__title">{benefit.vendor.tradingName}</h2><div className="评级"><评级只读initialRate={benefit.vendor.rating}类名=评级"分数={2}empty="icon-rating icon-rating--empty fa fa-star fa-2x"full="icon-rating fa fa-star fa-2x"/>

</如果>

但我这是一种重复.我不能只是做类似 (JSX) 的事情

<链接to={{ 路径名:`vendors/${benefit.vendor.id}`，状态:{ modal: false } }}条件={!this.props.isComingFromModal}><imgclassName="Benefit__vendor__thumb"src={benefit.vendor.tinyLogoUrl}alt="蓬托弗里奥"/><div className="Benefit__vendor__info"><h2 className="Benefit__vendor__title">{benefit.vendor.tradingName}</h2><div className="评级"><评级只读initialRate={benefit.vendor.rating}类名=评级"分数={2}empty="icon-rating icon-rating--empty fa fa-star fa-2x"full="icon-rating fa fa-star fa-2x"/>

</链接>

在这个假设场景中，如果 this.props.isComingFromModal，我将展示 Link 组件.有没有办法做到这一点?

解决方案

我的简单功能解决方案:

const ConditionalLink = ({ children, to, condition }) =>(!!条件 && 到)?<Link to={to}>{children}</Link>:<>{儿童}</>;

然后你可以这样使用它:

I have a situation in my React component which is: i want some elements to be wrappend in a Link component if this.props.isComingFromModal is false.

What i did (JSX):

<If condition={!this.props.isComingFromModal}>
  <Link
    to={{ pathname: `vendors/${benefit.vendor.id}`, state: { modal: false } }}
  >
    <img
      className="Benefit__vendor__thumb"
      src={benefit.vendor.tinyLogoUrl}
      alt="Ponto Frio"
    />


    <div className="Benefit__vendor__info">
      <h2 className="Benefit__vendor__title">{benefit.vendor.tradingName}</h2>
      <div className="rating">
        <Rating
          readonly
          initialRate={benefit.vendor.rating}
          className="rating"
          fractions={2}
          empty="icon-rating icon-rating--empty fa fa-star fa-2x"
          full="icon-rating fa fa-star fa-2x"
        />
      </div>
    </div>
  </Link>
  <Else />
    <img
      className="Benefit__vendor__thumb"
      src={benefit.vendor.tinyLogoUrl}
      alt="Ponto Frio"
    />


    <div className="Benefit__vendor__info">
      <h2 className="Benefit__vendor__title">{benefit.vendor.tradingName}</h2>
      <div className="rating">
        <Rating
          readonly
          initialRate={benefit.vendor.rating}
          className="rating"
          fractions={2}
          empty="icon-rating icon-rating--empty fa fa-star fa-2x"
          full="icon-rating fa fa-star fa-2x"
        />
      </div>
    </div>
</If>

But I this this is kind of repetitive. Can't I just do something like (JSX)

<Link
  to={{ pathname: `vendors/${benefit.vendor.id}`, state: { modal: false } }}
  condition={!this.props.isComingFromModal}
>
  <img
    className="Benefit__vendor__thumb"
    src={benefit.vendor.tinyLogoUrl}
    alt="Ponto Frio"
  />


  <div className="Benefit__vendor__info">
    <h2 className="Benefit__vendor__title">{benefit.vendor.tradingName}</h2>
    <div className="rating">
      <Rating
        readonly
        initialRate={benefit.vendor.rating}
        className="rating"
        fractions={2}
        empty="icon-rating icon-rating--empty fa fa-star fa-2x"
        full="icon-rating fa fa-star fa-2x"
      />
    </div>
  </div>
</Link>

In this hypothetical scenario, i would exhibit the Link component just if this.props.isComingFromModal. There is a way to do something this?

解决方案

My simple functional solution:

const ConditionalLink = ({ children, to, condition }) => (!!condition && to)
      ? <Link to={to}>{children}</Link>
      : <>{children}</>;

Then you can use it like this:

<ConditionalLink to="/path" condition={!isComingFromModal}
  conditional link
</ConditionalLink>

这篇关于有条件地与 react-router Link 链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆