作出反應，如果其他條件問題

Question

我在下面的語句得到了Syntex錯誤 -

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> 
    ) 
} 

瀏覽器顯示語法錯誤的 - 「== 100) ? (return (<span 請讓我知道我做錯了什麼 還有呢？」難道我們可以存儲會議react.js「

Answer 1

可以使用的if-else映射函數內

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> 
    ) 
} 

如果你使用三元運算符，你還需要返回結果的表達

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

從三元語句中移除return，並把它添加到開始，去掉額外{和}：

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

但最好移動語句的功能，以增加可讀性：

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> 
    ); 
} 

另外請注意，您正在創建多個組件具有相同id這可能會破壞DOM。

Answer 3

Sulthan無誤後，這是一個更清潔的三元語句版本：

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> 
    ) 
}