三元操作符返回HTML

Question

我知道如何使用三元操作符是這樣的：

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

但我想呈現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嘗試類似上面的東西，但我得到的錯誤，所以我如何可以將我的反應呈現方法中的三元組內的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!' }