有条件地与react-router链接

小编典典

有条件地与react-router链接

reactjs

我的React组件中存在一种情况：Link如果this.props.isComingFromModal为false，我希望将某些元素包装在组件中。

我做了什么（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>

但是我这是重复的。我不能做像（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>

在这种假设的情况下，即使，我也会展示Link组件this.props.isComingFromModal。有办法做到这一点吗？

阅读 310

2020-07-22

共1个答案

小编典典

您想避免在JSX中重复是正确的。对于这种情况，我有两种策略。

一个选项使用了一个事实，Link它只是一个ReactComponent对象，并且可以分配给任何变量。您可以在render方法的开头放置以下行：

var ConditionalLink = !this.props.isComingFromModal ? Link : React.DOM.div;

然后将您的内容包装在ConditionalLink组件中：

return (
    <ConditionalLink>
        <img />
        <div>...</div>
    </ConditionalLink>
);

当您的条件为真时，ConditionalLink将引用Link; 当条件为假时，这将很简单<div>。

您可能要尝试的另一种选择是在其他地方创建要呈现在Link内部（或不在链接内部）的内容，然后执行上面的操作：

var content = (
    <div>
        <img />
        <div>All your content</div>
    </div>
);

return (<If condition={!this.props.isComingFromModal}>
    <Link>
        {content}
    </Link>
    <Else />
    {content}
</If>);

您也可以创建一个函数或方法来返回content-或将其完全放在一个新组件中。

最后，要真正回答您的问题-
是的，您可以使链接组件按您希望的方式工作！React的一大优点是重新混合现有组件非常容易。如果要使用条件链接，只需创建一个返回{this.props.children}或<Link {...this.props}>{this.props.children}</Link>基于prop值的组件。

2020-07-22