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标签必须在条件{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 2

如果user.loggedIn是布尔值，那么您可以直接写

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

Answer 3

我认为最好避免直接在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>

Answer 4

问题进入user.loggedIn，但未定义或返回

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

Codepen

有条件地为活动/非活动用户提供徽章

4 个答案: