作出反应，如果其他条件问题

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