如何在 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 以获得有效的根元素。