使用三元運算符返回HTML

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!' }

我嘗試了類似上述的操作，但出現錯誤，因此如何在我的react render方法中將html放在三元組中？

Answer 1

像showThanks為true時三元表達式返回的內容一樣，JSX元素始終需要一個父節點。 您有兩個輸入-它們需要一個單親，因此請將它們括在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!' }