有条件地用另一个组件包裹按钮

Question

我无法正确地使用语法包装我的OverLay

    <td>
      {uuid === resetEmailValidationUser && popoverTop &&
        <OverlayTrigger trigger="click" placement="top" overlay={popoverTop}>
      }

        <Button
          bsSize='xsmall'
          className='reset-password-link background-color-dark-grey'
          onClick={() => handleResetPassword(uuid, email)}
        >
          reset password
        </Button>

    { uuid === resetEmailValidationUser && </OverlayTrigger>}
    </td>

Answer 1

这不是有效的JSX，它会抛出错误。你可以使用ternary operator：

这样写

canst button =  <Button
                  bsSize='xsmall'
                  className='reset-password-link background-color-dark-grey'
                  onClick={() => handleResetPassword(uuid, email)}
                >
                  reset password
                </Button>

<td>
    {uuid === resetEmailValidationUser && popoverTop?
        <OverlayTrigger trigger="click" placement="top" overlay={popoverTop}>
          {button}
        </OverlayTrigger>
    :
    {button}
</td>