三元运算符在反应js渲染功能中不起作用答案

【问题标题】：Ternary operator is not working in react js render function三元运算符在反应js渲染功能中不起作用
【发布时间】：2019-02-22 19:15:45
【问题描述】：

我们有一个简单的返回渲染操作，我们使用三元运算符根据状态变量 (anyException) 值来处理返回 html。代码 sn-p 如下所示：

 return <Form
        validate={ formValidation }
        onSubmit={this.onSubmit}
        initialValues={initialValues}
        render={({ handleSubmit,  submitting,  valid }) => (<form onSubmit={handleSubmit} className="k-form">

            <div className="container-fixed">
            (this.state.anyException ?  
                    <ErrorDialogPopup
                    anyException={this.state.anyException}
                    errorInfo={this.state.errorInfo}
                    toggleErrorDialog={this.toggleErrorDialog.bind(this)}
                    /> : <div className="row">
                {this.state.errorMessages.map(function(errorMessage) {
                    return <div className="errorMessage">{errorMessage}</div>
                })}
                </div>)

                <div>

                    <div className="row">
                        <div className="col-sm-12">
                            <div className="panel panel-default" id="frmNetworkAdd">
                                <div className="panel-heading">
                                    <h1 className="panel-title" id="panelHeader">
                                        {this.state.networkId === -1? <span>Add Network</span> : <span>Edit Network</span>}
                                    </h1>
                                </div>

但在运行时，这两种情况都会显示出来。您能否建议这里出了什么问题。

【问题讨论】：

如果我们不使用它，那么 this.state.. 显示为正常的 html 字符串
您能提供更多信息吗？比如this.state.errorMessages 的值和你看到的输出是什么？
好的，三元第一种情况显示一个简单的错误对话框，第二种情况在同一页面上显示一个简单的错误消息

标签： javascript reactjs react-redux ternary-operator

【解决方案1】：

不要用() 包裹你的三元，而是使用{}。

<div className="container-fixed">
  {this.state.anyException ?  
    <ErrorDialogPopup
      anyException={this.state.anyException}
      errorInfo={this.state.errorInfo}
      toggleErrorDialog={this.toggleErrorDialog.bind(this)}
    /> : <div className="row">
      {this.state.errorMessages.map(function(errorMessage) {
        return <div className="errorMessage">{errorMessage}</div>
      })}
    </div>
  }
</div>

【讨论】：