reagieren, wenn sonst Bedingung Problem

Question

I syntex Fehler in folgenden Aussage bin immer -

render(){ 
     return (
      <DefaultLayout> 
       <div>{this.props.registerMessage && this.props.registerMessage.status.map((msg, idx) => { 
         {(this.props.registerMessage.status == 100) ? (return (<span key={idx} id="succ">{this.errorMapping[msg]}</span>)) : (return (<span key={idx} id="err">{this.errorMapping[msg]}</span>))} 
        })}</div> 
     </DefaultLayout> 
    ) 
} 

Browser auf Syntaxfehler zeigt - „== 100) ? (return (<span Bitte lassen Sie mich wissen, was ich tue, falsch Und?“ Ist das wir speichern können Sitzung in react.js“

Answer 1

können Sie verwenden, wenn-sonst innerhalb einer Kartenfunktion

render(){ 
     return (
      <DefaultLayout> 
       <div>{this.props.registerMessage && this.props.registerMessage.status.map((msg, idx) => { 
         if(msg == 100) { return <span key={idx} id="succ">{this.errorMapping[msg]}</span> 
         } else { 
           return <span key={idx} id="err">{this.errorMapping[msg]}</span> 
         } 
        }) 
       }</div> 
     </DefaultLayout> 
    ) 
} 

wenn Sie ternären Operator verwenden Sie auch an der Rückkehr nach dem Ausdruck des Ergebnisses müssen

render(){ 
     return (
      <DefaultLayout> 
       <div>{this.props.registerMessage && this.props.registerMessage.status.map((msg, idx) => { 
         return <div>{(this.props.registerMessage.status == 100) ? (<span key={idx} id="succ">{this.errorMapping[msg]}</span>) : (<span key={idx} id="err">{this.errorMapping[msg]}</span>)}</div> 
        })}</div> 
     </DefaultLayout> 
    ) 
} 

Answer 2

die return aus der ternären Anweisung entfernen und fügen sie es zu Beginn, das entfernen der zusätzliche { und }:

return (this.props.registerMessage.status == 100) ? (<span key={idx} id="succ">{this.errorMapping[msg]}</span>) : (<span key={idx} id="err">{this.errorMapping[msg]}</span>); 

sondern im Idealfall die Aussage auf eine Funktion, bewegen die Lesbarkeit zu erhöhen:

render() { 
    const {registerMessage} = this.props; 

    const renderMessage = (message, index) => { 
     const id = (registerMessage.status == 100) ? "succ" : "err"; 

     return (
      <span key={index} id={id}> 
       {this.errorMapping[msg]} 
      </span> 
     ); 
    }; 

    return (
     <DefaultLayout> 
      <div> 
       {registerMessage && registerMessage.status.map(renderMessage)} 
      </div> 
     </DefaultLayout> 
    ); 
} 

Beachten Sie auch, dass Sie mehrere Komponenten mit den gleichen id schaffen, die den DOM wahrscheinlich brechen.

Answer 3

Sulthan korrekt ist, ist dies eine Version mit einer saubereren ternären Aussage:

render(){ 
    return (
     <DefaultLayout> 
      <div> 
       { 
        this.props.registerMessage && this.props.registerMessage.status.map((msg, idx) => { 
         { 
          this.props.registerMessage.status == 100 
           ? <span key={idx} id="succ">{this.errorMapping[msg]}</span> 
           : <span key={idx} id="err">{this.errorMapping[msg]}</span> 
         } 
        }) 
       } 
      </div> 
     </DefaultLayout> 
    ) 
}