jsx 中的三元运算符以包含带有反应的 html

Question

我正在使用 React，如果 this.state.message === 'failed' ，我正在尝试显示此错误消息。但我真的不确定为什么这个三元运算不起作用。我在这里做错了什么？

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

现在它只是在 html 中显示 return (this.state.message === 'failed') ? ( =>

原文由 Modelesq 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我目前喜欢在反应中像这样格式化我的三元组：

 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>
  );
}

IIFE 可以在渲染语句和三元表达式中使用，这是正确的。使用普通的 if .. else 语句是有效的，但是 render 函数的返回语句只能包含表达式，因此您必须在其他地方执行这些操作。

原文由 Nathan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

三进制的语法是 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>
  );
}

原文由 Matis Lepik 发布，翻译遵循 CC BY-SA 3.0 许可协议