0

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

4

5 回答 5

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 是自动关闭的，并且没有内容，所以它不会显示它，所以也添加一些内容

于 2019-03-12T07:45:49.410 回答
0

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

于 2019-03-12T07:43:08.687 回答
0

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

<div
  className={
    classNames('badge badge-pill', {
      'badge-success': user.loggedIn,
      'badge-danger': user.loggedIn
    })
  }
/>
于 2019-03-12T07:49:12.790 回答
0

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

于 2019-03-12T08:48:03.857 回答
0

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

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

密码笔

于 2019-03-12T09:53:21.037 回答