![this this](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了有条件地与 react-router Link 链接的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的 React 组件中存在一种情况,即:如果 this.props.isComingFromModal
为 false,我希望在 Link
组件中添加一些元素.>
我做了什么(JSX):
<链接to={{ 路径名:`vendors/${benefit.vendor.id}`,状态:{ modal: false } }}><imgclassName="Benefit__vendor__thumb"src={benefit.vendor.tinyLogoUrl}alt="蓬托弗里奥"/><div className="Benefit__vendor__info"><h2 className="Benefit__vendor__title">{benefit.vendor.tradingName}</h2><div className="评级"><评级只读initialRate={benefit.vendor.rating}类名=评级"分数={2}empty="icon-rating icon-rating--empty fa fa-star fa-2x"full="icon-rating fa fa-star fa-2x"/>
</链接><其他/><imgclassName="Benefit__vendor__thumb"src={benefit.vendor.tinyLogoUrl}alt="蓬托弗里奥"/><div className="Benefit__vendor__info"><h2 className="Benefit__vendor__title">{benefit.vendor.tradingName}</h2><div className="评级"><评级只读initialRate={benefit.vendor.rating}类名=评级"分数={2}empty="icon-rating icon-rating--empty fa fa-star fa-2x"full="icon-rating fa fa-star fa-2x"/>
</如果>
但我这是一种重复.我不能只是做类似 (JSX) 的事情
</链接>
在这个假设场景中,如果 this.props.isComingFromModal
,我将展示 Link 组件.有没有办法做到这一点?
解决方案
我的简单功能解决方案:
const ConditionalLink = ({ children, to, condition }) =>(!!条件 && 到)?<Link to={to}>{children}</Link>:<>{儿童}</>;
然后你可以这样使用它:
I have a situation in my React component which is: i want some elements to be wrappend in a Link
component if this.props.isComingFromModal
is false.
What i did (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>
But I this this is kind of repetitive. Can't I just do something like (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>
In this hypothetical scenario, i would exhibit the Link component just if this.props.isComingFromModal
. There is a way to do something this?
解决方案
My simple functional solution:
const ConditionalLink = ({ children, to, condition }) => (!!condition && to)
? <Link to={to}>{children}</Link>
: <>{children}</>;
Then you can use it like this:
<ConditionalLink to="/path" condition={!isComingFromModal}
conditional link
</ConditionalLink>
这篇关于有条件地与 react-router Link 链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!