Условная связь с реактивным маршрутизатором. Ссылка

Question

У меня есть ситуация в моей компоненте React: Я хочу, чтобы некоторые элементы были обернуты в компоненте Link, если 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 Link. Есть способ сделать что-то такое?

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>.

Другой вариант вы можете попробовать это создать содержимое, которое требуется, чтобы сделать внутри Link (или не в ссылке) в другом месте, а затем сделать по существу, что вы делаете выше:

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> на основе значения пропеллера.