javascript - 三元运算符在 react js 渲染函数中不起作用

Question

我们有一个简单的返回渲染操作，我们正在使用三元运算符根据状态变量 (anyException) 值对返回的 html 进行解码。代码片段如下所示:

 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>

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

Answer 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>