Button 组件上的隐藏属性被忽略答案

【问题标题】：hidden attribute ignored on Button componentButton 组件上的隐藏属性被忽略
【发布时间】：2021-04-17 11:41:02
【问题描述】：

我试图通过添加 hidden 属性来隐藏 Material-UI Button 组件，但似乎该属性被忽略了。我在其他 Material-UI 组件（例如 Typography、Grid 和 Box）上使用了 hidden 属性，并且效果很好。下面是我的代码的简化 sn-p。 Click here to try it out on 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 >

【问题讨论】：

material-ui.com/api/button 它没有隐藏道具。我建议条件渲染。
@MindaugasNakrosis material-ui.com/api/typography 没有 hidden 属性。虽然我同意您使用条件渲染的建议，但了解这两个组件的行为为何不同仍然很有趣。
两个组件都从HTMLAttributes 继承了它们的hidden 属性，以及一堆其他标准属性，如id、style、className 等。我不应该使用这些属性？

标签： javascript html reactjs material-ui

【解决方案1】：

TLDR：不要使用hidden 属性。使用conditional rendering 之类的{loading && <Component/>} 或类似<Component style={{ display: loading ? 'none' : undefined }} /> 的样式

首先，hidden 属性与 Material UI 或 React 无关，而是来自 Web 标准的默认 HTML 属性。其次，如果 display: ... 样式应用于同一元素，则 hidden 属性将被覆盖。这些样式是内联的还是来自 CSS 并不重要。因此，hidden 属性会被碰巧设置了 display 属性的任何 Material-UI 组件“忽略”。

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

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

【讨论】：