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

我在下面的语句中发现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>
    )
}

render（）{
返回(
{this.props.registerMessage&&this.props.registerMessage.status.map（（msg，idx）=>{
{（this.props.registerMessage.status==100）？（返回（{this.errorMapping[msg]}））：（返回（{this.errorMapping[msg]}））}
})}
)
}

---

浏览器在-“

==100”处显示语法错误（return（从三元语句中删除
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>);

return（this.props.registerMessage.status==100）？（{this.errorMapping[msg]}）：（{this.errorMapping[msg]}）；

但理想情况下，将语句移动到函数以增加可读性：

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

render（）{
const{registerMessage}=this.props；
const renderMessage=（消息、索引）=>{
常量id=（registerMessage.status==100）？“成功”：“错误”；
返回(
{this.errorMapping[msg]}
);
};
返回(
{registerMessage&®isterMessage.status.map（renderMessage）}
);
}

还要注意，您正在创建具有相同id的多个组件，这可能会破坏DOM。
您可以在映射函数中使用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（）{
返回(
{this.props.registerMessage&&this.props.registerMessage.status.map（（msg，idx）=>{
如果（msg==100）{返回{this.errorMapping[msg]}
}否则{
返回{this.errorMapping[msg]}
}
})
}
)
}

如果使用三元运算符，还需要在表达式后返回结果

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

render（）{
返回(
{this.props.registerMessage&&this.props.registerMessage.status.map（（msg，idx）=>{
返回{（this.props.registerMessage.status==100）？（{this.errorMapping[msg]}）：（{this.errorMapping[msg]}
})}
)
}
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>
    )
}

render（）{
返回(
{
this.props.registerMessage&&this.props.registerMessage.status.map（（msg，idx）=>{
{
this.props.registerMessage.status==100
？{this.errorMapping[msg]}
：{this.errorMapping[msg]}
}
})
}
)
}