Question

我们有一个简单的return渲染操作，并且我们根据状态变量（ anyException ）的值使用三元运算符将return 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>

三元运算符无法在React JS渲染函数中工作

1 个答案: