在Button组件上忽略隐藏属性

Question

我试图通过添加Button属性来隐藏Material hidden组件，但该属性似乎被忽略了。我在其他材料UI组件上使用了hidden属性，比如Typography、Grid和Box，在那里它工作得很好。下面是我代码的一个简化片段。单击此处在CodeSandbox上试用。

<Typography hidden={loading}>
  Works. This text is not displayed when `loading` is truthy.
</Typography>
<Button hidden={loading}>
  Doesn't work. This Button is still there!
</Button >

Answer 1

TLDR：不要使用hidden属性。使用条件渲染类似于{loading && <Component/>}或样式类似于<Component style={{ display: loading ? 'none' : undefined }} />

首先，hidden属性与实质性UI或React无关，而是web标准中的默认HTML属性。其次，如果将hidden样式应用于同一元素，则将重写display: ...属性。不管这些样式是内联的还是来自CSS的。因此，hidden属性被设置display属性的任何Material组件“忽略”。

您可以在官方文档中的任何示例中尝试这一点。例如，在使用CodeSandbox时，您可以看到hidden在Card、CardContent和Typography上工作，而在CardActionArea、CardMedia、CardActions和Button上则被忽略。

考虑到以上所述，最好避免hidden属性，因为它的行为在每个组件基础上是不同的。此外，如果在任何下一个版本的Material中更新一个组件以在内部使用display，它将更改该组件的hidden语义，并破坏代码库中的内容。