Question

我有这个组件：

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，但是如果我将show变量更改为 true ，则不会添加imageDisplay：

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

Answer 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这样的库可以实现这一点，并且您的代码会更加简洁。

Answer 2

我建议您在示例中习惯于字符串插值，您可以执行以下操作

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

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

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

2 个答案: