有条件地在渲染中添加类不起作用 - React/Gatsby答案

【问题标题】：Conditionally add class in render not working - React/Gatsby有条件地在渲染中添加类不起作用 - React/Gatsby
【发布时间】：2019-12-17 00:03:50
【问题描述】：

我有这个组件：

const imageDisplay = false;
  ...
    <PostsGrid
       posts={filteredPosts}
       defaultCoverImage={defaultCoverImage}
       imageDisplay={imageDisplay}
    />

PostGrid.js

...
console.log(imageDisplay)// prints false

    <Img
         className={'cover-image' + imageDisplay ? 'show' : 'hide'}
         fluid={
                post.coverImage
                ? post.coverImage.fluid
                : defaultCoverImage.fluid
                }
                alt={post.title}
          />

这应该添加类 hide，但它没有。如果我翻转它，hide 会被添加，但现在如果我将 imageDisplay 变量更改为 true，show 不会被添加：

className={'cover-image' + !imageDisplay ? 'hide' : 'show'}

【问题讨论】：

标签： javascript reactjs gatsby

【解决方案1】：

这是因为运算符优先级。你应该使用括号。请看下面：

imageDisplay = false
console.log('cover-image' + !imageDisplay ? 'hide' : 'show')

imageDisplay = true
console.log('cover-image' + !imageDisplay ? 'hide' : 'show')

imageDisplay = false
console.log('cover-image' + (!imageDisplay ? 'hide' : 'show'))

imageDisplay = true
console.log('cover-image' + (imageDisplay ? 'hide' : 'show'))

我不确定，但您可能不想更改类名，而是添加另一个类。为此，您需要在类名之间留一个空格。

如果可以的话，我还建议避免使用三元运算符。可以使用 classnames 之类的库，并且您的代码会变得更简洁。

【讨论】：

我发誓我之前尝试过 () 但我的问题不仅仅是封面图片后面没有空格

【解决方案2】：

我建议在你的例子中习惯于字符串插值，你可以做这样的事情

className={`cover-image ${imageDisplay? 'show': 'hide'}`}

您的示例也不应该将两个类放在一起导致无效的“cover-imageshow”或“cover-imagehide”吗？也许这就是导致错误的问题

【讨论】：