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>)
: '';