基于状态的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

问题是您通过将内容包装在``{backticks）中而使showError成为字符串，并且不再保留JSX表达式

改为使用()。另外，当您不想返回任何内容时，应返回null而不是空字符串

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