有條件地與反應路由器連接鏈接

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

有條件地與反應路由器連接鏈接

回答

相關問題