如何在 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

尝试&nbsp; {(props.props.approvalChance_NewLoan === 'Less Likely' &&&nbsp;&nbsp; &nbsp;props.props.approvalChance_Combined === 'Less Likely' ?&nbsp; &nbsp; &nbsp; <SmartTooltip wrapperCssClass="option-detail-tooltip" ctaLabel="How do I increase my chances?">&nbsp; &nbsp; &nbsp; &nbsp; <h3>Less Likely</h3>&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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.&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; </SmartTooltip>) : null}

Answer 2

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