有条件地与 react-router Link 链接

IT技术 javascript reactjs react-router
2021-04-27 12:36:36

我的 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>

在这个假设场景中，如果this.props.isComingFromModal. 有没有办法做到这一点？

3个回答

我的简单功能解决方案：

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

然后你可以像这样使用它：

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

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

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

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

然后只呈现包裹在ConditionalLink组件中的内容：

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

当您的条件为真时，ConditionalLink将引用Link; 当条件为假时，它将是一个简单的<div>.

您可能想尝试的另一个选项是在其他地方创建要在链接内（或不在链接内）呈现的内容，然后基本上执行您在上面所做的操作：

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 值的组件。

也许这已经晚了，但尽管埃文的回答是正确的，但两种情况对我都不起作用。也许是由于我做了一些额外的错误导入或什么......但它激发了我另一个类似的解决方案，这对我来说很好，所以我想在这里分享它给那些像我一样处于类似情况的人。

该解决方案将不是将内容放入变量中，而是创建一个简单的ConditionalLink组件，该组件将接受任何内容，就像children其他必需的props一样，但至少是conditionand path to。

render() {
    const {children, to, condition} = this.props;
    let toRender;

    if (condition) {
        toRender = <Link to={to}>{children}</Link>;
    } else {
        toRender = children;
    }

    return toRender;
}

它的好处是您以后可以再次将其与任何其他内容一起使用。例如：

<ConditionalLink condition={enabled && linkPath} to={linkPath}>
    ...content...
</ConditionalLink>
其它你可能感兴趣的问题
上一篇梳理和滑行 下一篇如果我有一个喷嘴堵塞，我可以通过简单地更换喷嘴轻松摆脱它吗？