基於狀態的React條件渲染

Question

我正在發送一個API請求，並將其結果呈現到UI中。

現在，對於錯誤處理，我希望如果發生錯誤，則將包含錯誤消息的div呈現到UI中。

為此，我編寫了以下三元條件：

const showError = this.state.error
? `<div className="error-container">
    Error:
      <p>{this.state.error}</p>
   </div>`
: '';

然后在我的渲染方法中使用它： {showError}

但是React將結果視為字符串，並將以下內容呈現給UI：

我究竟做錯了什么？

Answer 1

在render方法中，您可以執行以下操作：

render() {
  return(
   // ... other components
   {this.state.error && (
     <div className="error-container">
       Error:
       <p>{this.state.error}</p>
     </div>
    )}
    // ... 
  )
}

Answer 2

問題是您通過將內容包裝在``{反引號} showError成為字符串，並且不再保留JSX表達式

使用()代替。 另外，當您不想返回任何內容時，應返回null而不是空字符串

const showError = this.state.error
? (<div className="error-container">
    Error:
      <p>{this.state.error}</p>
   </div>)
: '';