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