如何在 React.js 中添加条件

Question

如果两个条件为真，我想显示工具提示。  <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? &nbsp;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? &nbsp;Try increasing the time to pay it back over.Or you could try asking for less money.            </p>          </SmartTooltip>)}        </LikelihoodIndicatorRefi>

Answer 1

尝试

  {(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? &nbsp;Try increasing the time to pay it back over.Or you could try asking for less money.

        </p>

      </SmartTooltip>) : null}

Answer 2

简单地链接&&表达式，如果之前的所有表达式都为真，它总是会计算到最后一个表达式。所以bool && bool && <Component />将足以显示它。如果您将它作为 JSX 树中的第一个元素，那么您应该<></>在条件周围添加React.Fragment 以获得有效的根元素。