时间戳

首页 > 解决方案 > 如何根据计时器在反应中显示和不显示跨度标签

javascript - 如何根据计时器在反应中显示和不显示跨度标签

问题描述

我试图在我的反应项目中显示而不显示跨度标记，具体取决于我传入的布尔值。

你能帮我确定如何传入一个我可以从 true 更改为 false 的值，它将显示或不显示 span 标签。

此外，当我尝试 2 种方法来禁用 div 并禁用 span 标签本身但它不起作用时。

我想要的预期操作是根据我传入的布尔值显示而不是显示微笑的表情符号。

对于上下文，该文件的扩展名为 .js 我正在使用 React 和 material-ui

<span role='img' aria-label='happy' disabled='true'>
                            
</span>

<div className='heroTypedElement' style={{ display: false }}>
                                
   <span role='img' aria-label='sheep' disabled='true'>
                                    
   </span>
</div>

标签： javascripthtmlreactjs

解决方案

你可以使用 css

将这些添加到您的 CSS 中：

div.heroTypedElement > span[data-disabled ="true"] {
  display:none
}
div.heroTypedElement > span[data-disabled ="false"] {
  display:inline
}

正如@cloned 在评论中指出的，disabled 不是 span 标签，因此您可以制作自定义属性data-disabled并将 JSX 更改为：

<span role='img' aria-label='happy' data-disabled='true'>
                            
</span>

您还可以使用如下三元运算符

这里 react 会检查 'showEmoji' 是否为真，然后显示表情符号，否则返回空字符串。

    return(
<div className='heroTypedElement' style={{ display: false }}>
                                
   <span role='img' aria-label='sheep'>
      {showEmoji ?'':''}
   </span>
</div>
)

或者您可以使用 && 运算符：

这里 javascript 将首先评估 showEmoji。如果它为真，那么将返回第二个语句而不检查，因为如果 showEmoji 为真，那么第二个语句将指示整个检查是真还是假，如果 showEmoji 为假，则 javascript 将停止检查，因为第二个语句是否为真无关紧要不是

return(<div className='heroTypedElement' style={{ display: false }}>

   <span role='img' aria-label='sheep'>
      {showEmoji && ''}
   </span>
</div>
)

推荐阅读