有条件地为活动/非活动用户呈现徽章

Posted 2023-03-16

【中文标题】有条件地为活动/非活动用户呈现徽章

【英文标题】：Conditionally render a badge for active/inactive User

【发布时间】：2019-08-02 14:48:28

【问题描述】：

我正在尝试根据用户的logged 条件有条件地呈现徽章。如果来自服务器的道具是true，那么徽章是绿色的，else 灰色。

我尝试了各种解决方案，从 JSX 中的基本 if/else 到 classNames，但徽章没有被渲染。

我的代码：

              user.loggedIn ? (
                <div
                  className=classNames('badge badge-pill', 
                    'badge-success': user.loggedIn,
                    'badge-danger': !user.loggedIn
                  )
                />

我看不出代码有什么问题。我的意思是该项目应该已经呈现，具有多种解决方案。任何想法，我做错了什么。

              <span
                className=
                  user.loggedIn ? 'badge badge-pill badge-success' : 'badge badge-pill badge-muted'
                
              />

我也试过了。

我可以看到 React-Dev-Tools 中的元素正在正确渲染，使用正确的道具，但我看不到它在屏幕上渲染。

【参考方案1】：

只有在用户登录时才会呈现您的内容。 div 标签也必须在条件 isLoggedIn

内关闭

你应该试试这样的：

        user.loggedIn ? (
      <div className='badge badge-pill badge-success'>ENTER YOUR CONTENT HERE</div>) : (
            <div className='badge badge-pill badge-danger'>ENTER YOUR CONTENT HERE</div>
    )

但是由于div是自闭的，没有内容，所以不显示，所以也要加一些内容

【讨论】：

谢谢。我没有考虑内容。现在我必须找出如何在里面打印一个没有内容的简单圆圈......

【参考方案2】：

当您使用user.loggedInd ? (yourComponent...)在所有div周围设置渲染条件时，将永远不会显示已注销用户的徽章

【讨论】：

我也发布了另一个解决方案。你能解释一下第二个解决方案有什么问题吗？如果我在 div 内移动条件，会解决它吗？我想这就是我对第二个所做的。

第二种解决方案应该在 DOM 中显示一个 span 元素。然后，就看你放的类了，看显示是否有意义。

【参考方案3】：

如果user.loggedIn 是布尔值，那么你可以写

<div
  className=
    classNames('badge badge-pill', 
      'badge-success': user.loggedIn,
      'badge-danger': user.loggedIn
    )
  
/>

【参考方案4】：

我认为直接在 jsx 中避免使用条件会更好。你可以这样做：

let attachClass = ['badge', 'badge-pill']
   if(user.loggedIn)
      attachClass = [...attachClass, 'badge-success'].join(' ');
   else
      attachClass = [...attachClass, 'badge-danger'].join(' ');
   

你可以只返回一个带有 className 的 div 附加类：

<div className=attachClass></div>

【参考方案5】：

问题查看 user.loggedIn 未定义或返回 false

const loggedIn = true;
<span className=loggedIn ? 'badge-success' : 'badge-muted'>
Css Change </span>

Codepen