有条件地与 react-router 链接答案

【问题标题】：Conditionally linking with react-router Link有条件地与 react-router 链接
【发布时间】：2016-09-10 04:07:36
【问题描述】：

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

我做了什么（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 一样。有办法做到这一点吗？

【问题讨论】：

你不能在某个地方创建你的Link 并根据你的条件进行渲染吗？
我可以，但我的问题与链接组件有关，如果我可以有条件地展示它。 (:

标签： javascript reactjs react-router

【解决方案1】：

我的简单功能解决方案：

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

那么你可以这样使用它：

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

【讨论】：

【解决方案2】：

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

此解决方案不是将内容放入变量中，而是创建一个简单的 ConditionalLink 组件，该组件将接受任何内容为 children 以及其他必需的道具，但至少是 condition 和路径 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>

【讨论】：

【解决方案3】：

你想在你的 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 的一大优点是重新混合现有组件非常容易。如果您需要条件链接，只需创建一个组件，该组件根据 prop 的值返回 {this.props.children} 或 <Link {...this.props}>{this.props.children}</Link>。

【讨论】：