有条件地与反应路由器连接链接

我在我的React组件中有一种情况，即：如果this.props.isComingFromModal为假，我想要一些元素在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。有办法做这件事吗？

来源

2016-05-13 Filipe Merker

难道你不能只是在某处创建你的'链接'并根据你的条件渲染它？ – sehrob

我可以，但我的问题是与链接组件相关，如果我可以有条件地展示它。（： –

你想避免在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>。

来源

2016-05-14 05:47:17 evan

有条件地与反应路由器连接链接

回答

相关问题