我的React组件中存在一种情况：Link如果this.props.isComingFromModal为false，我希望将某些元素包装在组件中。
我做了什么（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>
在这种假设的情况下，即使，我也会展示Link组件this.props.isComingFromModal。有办法做到这一点吗？
我简单的功能解决方案：
const ConditionalLink = ({ children, to, condition }) => (!!condition && to)
? <Link to={to}>{children}</Link>
: <>{children}</>;
然后，您可以像这样使用它：
<ConditionalLink to="/path" condition={!isComingFromModal}
conditional link
</ConditionalLink>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句