Question

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

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

Answer 1

你想尝试避免在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>的组件。

Answer 2

也许这是晚了，但是尽管evan的回答是正确的，但两种情况都不适合我。也许是由于我进行了一些其他不正确的输入或其他原因而引起的...但是，这使我想到了另一个类似的解决方案，该解决方案对我来说效果很好，所以我想在这里与那些像我一样处于类似状况的人分享。 / p>

此解决方案将代替将内容放入变量中，而是创建一个简单的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>

Answer 3

我简单的功能解决方案：

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

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

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

有条件地与react-router Link链接

3 个答案: