我正在发送 API 请求并将其结果呈现到 UI。
现在，对于错误处理，我希望如果出现错误，则将包含错误消息的 div 呈现到 UI 中。
为了实现这一点，我编写了以下三元条件：
const showError = this.state.error
? `<div className="error-container">
Error:
<p>{this.state.error}</p>
</div>`
: '';
然后在我的渲染方法中使用它： {showError}
但 React 将结果视为字符串并将以下内容呈现给 UI：
我究竟做错了什么？
在您的render方法中，您可以执行以下操作：
render() {
return(
// ... other components
{this.state.error && (
<div className="error-container">
Error:
<p>{this.state.error}</p>
</div>
)}
// ...
)
}
问题是您showError通过将内容包裹在 ``（反引号）中来创建一个字符串，它不再是 JSX 表达式
使用()来代替。此外，当您不想返回任何内容时，您应该返回null而不是空字符串
const showError = this.state.error
? (<div className="error-container">
Error:
<p>{this.state.error}</p>
</div>)
: '';