三元運算符在jsx中包含HTML與反應

我正在使用的反應，我試圖顯示此錯誤消息，如果this.state.message === 'failed'。但我真的不確定爲什麼這個三元操作不起作用。我在這裏做錯了什麼？三元運算符在jsx中包含HTML與反應

render() { 
... 
<div className="row"> 
return (this.state.message === 'failed') ? (=> { 
    <div className="alert alert-danger" role="alert"> 
     Something went wrong 
    </div> 
})() : false; 
} 
</div>

眼下它只是在HTML

來源

2016-06-28 Modelesq

這看起來不像有效的語法......我會在那裏使用常規的「if」語句。無論如何，你爲什麼要返回「假」？ – elclanrs

你是否試圖用'{}'包裝它？就像.. {this.state.message ==='失敗'？

Things

：null}' –

我現在想在格式化我ternaries這樣的反應：

render() { 
    return (
    <div className="row"> 
     { //Check if message failed 
     (this.state.message === 'failed') 
      ? <div> Something went wrong </div> 
      : <div> Everything in the world is fine </div> 
     } 
    </div> 
); 
}

你是正確IIFEs可以渲染聲明以及三元表達式中使用。使用普通if .. else聲明是有效的，但render函數的返回語句只能包含表達式，所以你會做那些其他地方..

來源

2016-06-28 19:59:01 Nathan

也許一個很好的[文章]（https://www.robinwieruch.de/conditional-rendering-react/）瞭解React的條件渲染。 –

顯示return (this.state.message === 'failed') ? (=>你應該試試這個：

render() { 
    return (
     <div className="row"> 
      { (this.state.message === 'failed') ? 
       <div className="alert alert-danger" role="alert"> 
        Something went wrong 
       </div> : 
       <span> Everything in the world is fine </span> } 
     </div> 
    ); 
}

來源

2016-06-28 19:27:56

這仍然顯示'return（世界上的一切都很好）;'在頁面呈現時：\ – Modelesq

已更新到您的問題的最新編輯。如果您不想返回任何內容，只需將''替換爲'undefined'或'null'。 –

的語法三元是condition ? if : else。爲了安全起見，您始終可以將整個三元語句包含在括號內。 JSX元素也包含在括號中。箭頭函數中的胖箭頭總是前面有兩個括號（用於參數） - 但是您無論如何都不需要任何函數。所有這一切，你的代碼中有幾個語法錯誤。這裏有一個工作解決方案：

render() { 
    return (this.state.message === 'failed' ? (
    <div className="alert alert-danger" role="alert"> 
    Something went wrong 
    </div> 
) : null); 
}

編輯：如果這是在其他標記內，那麼你不需要再次調用渲染。您可以使用大括號進行插值。

render() { 
    return (
    <div className="row"> 
     {this.state.message === 'failed' ? (
     <div className="alert alert-danger" role="alert"> 
     Something went wrong 
     </div> 
    ) : null} 
    </div> 
); 
}

來源

2016-06-28 19:28:17

再次使用可變三元用括號內

render() { 
    return(
    <div className='searchbox'> 
    {this.state.var ? <div className='warning'>{this.state.var}</div> : ''} 
    </div> 
) 
}

來源

2017-07-23 09:28:54

接受的答案由@Nathan和其他類似的答案是正確的。但值得注意的是，?的結果和:的結果必須是單個元素或包裝在單個元素中（或者結果可能是null | undefined，其中任何一個都可以作爲單個元素）。在下面的例子中，?結果會工作，但對於:結果將失敗....

return (
    {this.state.message === 'failed' ? (
     <div> 
     <row>three elements wrapped</row> 
     <row>inside</row> 
     <row>another element work.</row> 
     </div> 
    ) : (
     <row>html like</row> 
     <row>haiku</row> 
     <row>must follow rules of structure.</row> 
    ) 
    } 
)

來源

2017-11-29 05:21:42 Kenigmatic

鑑於上述的答案，你也可以直接在您的render()從return()返回三元表達這樣

return condition? this.function1(): this.function2();

and inside function1（）and function2（）你可以返回你的視圖。

來源

2018-02-23 06:35:56 Aayushi

三元運算符在jsx中包含HTML與反應

回答

相關問題