React Material-UI：如何在单击后禁用工具提示

Question

我在 Material-UI 中有一个选项卡组件，我想在其上实现一个工具提示。

我的问题是，当我单击选项卡组件时，工具提示并没有消失。我单击该选项卡后它必须消失。

目前，即使我单击该选项卡，它仍然可见。

我该如何纠正这个问题？

<Tabs
  className="navbar-routes"
  value={value}
  style={{ color: 'green'}}
  indicatorColor="secondary"
  onChange={handleChange} 
>
  {
    tabsData.map(({id,title,description}) => {
      return( 
        <ToolTip description={description}>
          <Tab
            style={{ 
              minWidth: 10,
              fontSize: '80%',
              fontWeight: 'bold',
              marginLeft: '-4px',
              marginRight: 4
            }} 
            key={id}
            component={Link}
            to={`/${title}`}
            label={`${title}`}
          />
        </ToolTip>
      );
    }
 )}
  </Tabs>

Answer 1

我解决这个问题的方法是有条件地渲染工具提示。在您的情况下，我想您希望工具提示不呈现当前活动路线的选项卡：

function ConditionalTooltip({renderTooltip, children, ...props}) {

    return renderTooltip ? <Tooltip {...props}>{children}</Tooltip> : children;

}

function Tabs() {
    const location = useLocation();

    return (
        <Tabs
          className="navbar-routes"
          value={value}
          style={{ color: 'green'}}
          indicatorColor="secondary"
          onChange={handleChange} 
        >
          {
            tabsData.map(({id,title,description}) => {
              return( 
                <ConditionalTooltip 
                    renderTooltip={location.pathname.indexOf(title) === -1} /* only render tooltip on not active urls */
                    title={description}
                >
                  <Tab
                    style={{ 
                      minWidth: 10,
                      fontSize: '80%',
                      fontWeight: 'bold',
                      marginLeft: '-4px',
                      marginRight: 4
                    }} 
                    key={id}
                    component={Link}
                    to={`/${title}`}
                    label={`${title}`}
                  />
                </ConditionalTooltip>
              );
            }
         )}
        </Tabs>
    )
}