有条件地为 active/inactive 用户呈现徽章

Question

我正在尝试根据用户的 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 中看到该元素，使用正确的道具正确渲染，但我看不到它在屏幕上渲染。

Answer 1

注销用户的徽章将永远不会显示，因为您在所有 div 和 user.loggedInd ? (yourComponent...)

周围放置渲染条件

Answer 2

您的内容只有在用户登录后才会呈现。此外，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是自闭的，没有内容，所以不显示，所以也加点内容

Answer 3

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

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

Answer 4

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

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

你可以只 return 一个 div 加上 class姓名 class:

<div className={attachClass}></div>

Answer 5

问题调查 user.loggedIn is not defined or return false

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

Codepen

有条件地为 active/inactive 用户呈现徽章

Conditionally render a badge for active/inactive User

javascript

rendering

class-names

reactjs