[英]How to add condition in React.js
I want to show tooltip if two conditions are true.如果两个条件为真,我想显示工具提示。
<LikelihoodIndicatorRefi likelihood={ props.props.approvalChance_NewLoan } >
{console.log(props.props.approvalChance_NewLoan === 'Less Likely' && props.props.approvalChance_Combined === 'Less Likely')}
{(props.props.approvalChance_NewLoan === 'Less Likely' && props.props.approvalChance_Combined === 'Less Likely' &&
<SmartTooltip wrapperCssClass="option-detail-tooltip" ctaLabel="How do I increase my chances?">
<h3>Less Likely</h3>
<p>
Want to improve your chnace of getting this loan? Try increasing the time to pay it back over.Or you could try asking for less money.
</p>
</SmartTooltip>)}
</LikelihoodIndicatorRefi>
<LikelihoodIndicatorRefi likelihood={ props.props.approvalChance_NewLoan } >
{console.log(props.props.approvalChance_NewLoan === 'Less Likely' && props.props.approvalChance_Combined === 'Less Likely')}
{(props.props.approvalChance_NewLoan === 'Less Likely' && props.props.approvalChance_Combined === 'Less Likely' &&
<SmartTooltip wrapperCssClass="option-detail-tooltip" ctaLabel="How do I increase my chances?">
<h3>Less Likely</h3>
<p>
Want to improve your chnace of getting this loan? Try increasing the time to pay it back over.Or you could try asking for less money.
</p>
</SmartTooltip>)}
</LikelihoodIndicatorRefi>
Try尝试
{(props.props.approvalChance_NewLoan === 'Less Likely' &&
props.props.approvalChance_Combined === 'Less Likely' ?
<SmartTooltip wrapperCssClass="option-detail-tooltip" ctaLabel="How do I increase my chances?">
<h3>Less Likely</h3>
<p>
Want to improve your chnace of getting this loan? Try increasing the time to pay it back over.Or you could try asking for less money.
</p>
</SmartTooltip>) : null}
Simply chain &&
expressions, it will always evaluate to the last expression, if all expressions before were true.简单地链接&&
表达式,如果之前的所有表达式都为真,它将始终计算为最后一个表达式。 So bool && bool && <Component />
will be enough to display it.所以bool && bool && <Component />
足以显示它。 If you have it as first element in your JSX Tree then you should add <></>
React.Fragment around the condition to have a valid root element.如果您将它作为 JSX 树中的第一个元素,那么您应该在条件周围添加<></>
React.Fragment 以获得有效的根元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.