Question

我知道如何使用这样的三元运算符：

{ this.state.showThanks ? 'Thanks for your response!' : null }

但是我想渲染html，然后点击

删除那个html

    { this.state.showThanks ? <input type="submit" className="decisionButtons" id="canDecisionButton" value="I can play" onClick={() => this.canPlay()}/>
                <input type="submit" className="decisionButtons" id="cantDecisionButton" value="I cannot play" onClick={() => this.cannotPlay()}/>
  : 'Thanks for your response!' }

我尝试了类似上面的内容但是我遇到了错误，那么如何在我的反应渲染方法中将html放在三元组内？

Answer 1

JSX元素，就像showThanks为true时返回的三元表达式一样，总是需要一个父节点。你有两个输入 - 他们需要一个父输入，所以将它们包含在一个div中。

{ this.state.showThanks ? 
<div>
    <input type="submit" className="decisionButtons" id="canDecisionButton" value="I can play" onClick={() => this.canPlay()}/>
    <input type="submit" className="decisionButtons" id="cantDecisionButton" value="I cannot play" onClick={() => this.cannotPlay()}/>
</div>
  : 'Thanks for your response!' }

使用三元运算符返回HTML

1 个答案: