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

仅链接//this changes color pb.setForeground(new Color(r,g,b)); //this changes textcolor pb.setUI(new BasicProgressBarUI() { protected Color getSelectionBackground() { return Color.black; } protected Color getSelectionForeground() { return Color.white; } }); 表达式，如果之前的所有表达式均为true，它将始终求值为最后一个表达式。因此&&就足以显示它。如果您将其作为JSX树中的第一个元素，则应在条件周围添加bool && bool && <Component /> React.Fragment以拥有有效的根元素。