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

【问题标题】：How to display and not display span tag in react depending on a timer如何根据计时器在反应中显示和不显示跨度标签
【发布时间】：2021-04-01 17:31:54
【问题描述】：

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

您能帮我确定如何传入一个我可以从 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>

【问题讨论】：

display: false?，它不存在，试试 display:none
您应该使用 React 组件中的状态来根据布尔值显示标签。在 React 中显示或不显示决定像这样{state.elementShow === true? <tag></tag> : ''}

标签： javascript html reactjs

【解决方案1】：

你可以使用css

将这些添加到您的 CSS：

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

正如@cloned 在 cmets 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 将停止检查，因为第二个语句是否为真无关紧要不是

返回(

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

【讨论】：

disabled 在 span 标签上不存在。它很可能会起作用，但更好的是使用 data-attribute 来获得有效的 HTML。
三元运算符的好建议。
@javarunner 如果解决了您的问题，您可以投票并将其设置为已接受的答案。

【解决方案2】：

您可以在代码中应用条件。它看起来像这样：

this.state = {
    showSpan:true
}

内部返回

{ this.state.showSpan && <span role='img' aria-label='happy' disabled='true'>
                        ?
   </span>
}

另外，创建一个函数，将setState showSpan true 变为 false，反之亦然。这可能会解决您有条件地显示或不显示任何跨度或任何代码段的问题。

【讨论】：