Тернарный оператор не работает в функции рендеринга JS - PullRequest
Новая
       10

Тернарный оператор не работает в функции рендеринга JS

0 голосов
/ 18 сентября 2018

У нас есть простая операция рендеринга возврата, и мы снимаем html возврата, используя троичный оператор, на основе значения переменной состояния ( anyException ).Фрагмент кода показан ниже: 

 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>

Но во время выполнения отображаются оба случая.Не могли бы вы предложить, что здесь происходит не так.

1 Ответ

0 голосов
/ 18 сентября 2018

Вместо того, чтобы обернуть свою троицу в (), используйте {} вместо. 

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