te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - hidden attribute ignored on Button component - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - hidden attribute ignored on Button component - Stack Overflow

    javascript - hidden attribute ignored on Button component - Stack Overflow

    programmeradmin3浏览0评论

    I'm trying to hide a Material-UI Button ponent by adding the hidden attribute, but it appears the attribute is ignored. I've used the hidden attribute on other Material-UI ponents such as Typography, Grid and Box and there it works fine. Below is a simplified snippet of my code. 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 >

    I'm trying to hide a Material-UI Button ponent by adding the hidden attribute, but it appears the attribute is ignored. I've used the hidden attribute on other Material-UI ponents such as Typography, Grid and Box and there it works fine. Below is a simplified snippet of my code. 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 >
    • javascript
    • html
    • reactjs
    • material-ui
    Share Improve this question asked Jan 12, 2021 at 13:53 Martin DevillersMartin Devillers 18k6 gold badges50 silver badges92 bronze badges 3
    • material-ui./api/button It does not have hidden prop. I'd suggest conditional rendering. – Mindaugas Nakrosis Commented Jan 12, 2021 at 13:58
    • @MindaugasNakrosis neither material-ui./api/typography has a hidden prop. While I do agree with your suggestion of using conditional rendering, it would still be interesting to understand why the two ponents behave differently. – secan Commented Jan 12, 2021 at 14:17
    • Both ponents inherit their hidden prop from HTMLAttributes, along with a bunch of other standard props like id, style, className, etc. Am I not supposed to use these properties? – Martin Devillers Commented Jan 13, 2021 at 12:53
    Add a ment  | 

    1 Answer 1

    Reset to default 14

    TLDR: Don't use the hidden attribute. Use conditional rendering like {loading && <Component/>} or a style like <Component style={{ display: loading ? 'none' : undefined }} />

    First, the hidden attribute has nothing to do with Material UI or React, but is a default HTML attribute from the web standard. Second, the hidden attribute is overridden if a display: ... style is applied to the same element. It doesn't matter if these styles are inline or ing from CSS. As a result, the hidden attribute is "ignored" by any Material-UI ponent that happens to set the display attribute.

    You can try this on any of the examples from the official docs. For example, playing around with CodeSandbox you can see hidden work on Card, CardContent and Typography, but ignored on CardActionArea, CardMedia, CardActions and Button.

    Considering the above it's best to avoid the hidden attribute as its behavior is different on a per-ponent basis. Moreover, if in any next version of Material UI a ponent is updated to use display internally, it'll change the semantics of hidden for that ponent and break stuff in your code base.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论