仅在 dropdownButton 的禁用下拉项上添加工具提示 (react-bootstrap)

Question

所以我有一个带有操作列的 table，我想根据原因禁用下拉项并仅在该禁用元素上显示工具提示消息。以下是我尝试执行此操作的操作和方式，但工具提示显示在下拉列表中的所有按钮上，我想知道如何仅在这些操作上显示它 disabled={unusedBlock > 0 && action.id == = 1} const itemActions = [ { title: "Create", icon: <LockIcon />, id: 1 }, { title: "Delete", icon: <DeleteIcon />, id: 2 }, ];

 <DropdownButton
    id="dropdown-menu-align-end"
    alignleft="true"
    size="sm"
    variant="secondary"
    Tooltip="smth"
    drop="left"
    title={<ItemActionIcon />}
    className="item-actions-dropdown display-garnishment-drop-items"
  >
    {itemActions.map((action) => {
      return (
        <OverlayTrigger overlay={<Tooltip id="tooltip-disabled">SOMETHING!</Tooltip>}>
         <span className="d-inline-block">
        <Dropdown.Item
          key={action.title}
          disabled={unusedBlock > 0 && action.id === 1}
          onClick={(e) => handleOnClick(e, action.id)}
        >
          <div className="custom-dropdown-item">
            <span className="custom-svg">{action.icon}</span>
            <span>{action.title}</span>
          </div>
        </Dropdown.Item>
         </span>
        </OverlayTrigger> 
      );
    })}
  </DropdownButton>

对于按钮和工具提示，我使用了来自“react-bootstrap”的 { Dropdown, DropdownButton, OverlayTrigger, Tooltip } 对于这个问题，我很抱歉，但我还是个初学者。

Answer 1

你必须考虑两件事：

在您的代码中，您在没有任何条件的情况下呈现 OverlayTrigger，因此始终显示工具提示。使渲染有条件（与禁用逻辑相反）
无法在禁用的元素上显示工具提示，您需要一个包装器：https://react-bootstrap.netlify.app/components/overlays/#overview

Tooltips for disabled elements must be triggered on a wrapper element.

.

{itemActions.map((action) => {
    const disabled = action.id === 1; // your logic goes in here: unusedBlock > 0 && action.id === 1
    const dropdownItem = (
        <MyDropdownItem action={action} disabled={disabled} />
    );
    return disabled ? (
        <OverlayTrigger
            overlay={<Tooltip id="tooltip-disabled">SOMETHING!</Tooltip>}
        >
            <div>{dropdownItem}</div>
        </OverlayTrigger>
    ) : (
      dropdownItem
    );
})}

https://codesandbox.io/s/affectionate-lalande-cgiiyh

仅在 dropdownButton 的禁用下拉项上添加工具提示 (react-bootstrap)

Add a tooltip only on disabled dropdown item from a dropdownButton (react-bootstrap)

tooltip

reactjs

react-bootstrap

dropdownbutton