有条件地与反应路由器连接链接
问题描述:
我在我的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
。有办法做这件事吗?
答
你想避免在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>
。
难道你不能只是在某处创建你的'链接'并根据你的条件渲染它? – sehrob
我可以,但我的问题是与链接组件相关,如果我可以有条件地展示它。 (: –