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

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

3 个答案: