有条件地激活Material UI工具提示吗？

Question

我使用Material UI具有以下React组件：

const MyButton = ({ warningText }) => (
    <Tooltip title={warningText}>
        <Button>Do action</Button>
    </Tooltip>
)

当前，当未定义warningText时，此工具提示为空。相反，我不想显示任何工具提示。在这些情况下，有没有办法抑制工具提示？

当然，我可以只使用if语句不呈现工具提示组件，但这在我看来将导致相当丑陋的代码。

Answer 1

应该是

 <Tooltip title={warningText == null ? "" : warningText}>
        <Button>Do action</Button>
 </Tooltip>

文档说如果字符串长度为零，则不会显示。

https://material-ui.com/api/tooltip/

  

工具提示标题。零长度标题字符串永远不会显示。

Answer 2

您应该看看https://material-ui.com/api/tooltip/

有类似的选项

• disableFocusListener
• disableHoverListener
• disableTouchListener
• 互动

我认为interactive={true}应该最适合您的需求

<Tooltip title={warningText} interactive={!warningText}>...</Tooltip>