如何在ReactJs中执行嵌套的If语句?

时间:2017-01-17 18:47:30

标签: reactjs

我有类似的东西。

render(){
    if(//loading){
        return ( <div>loading</div>);
    }
    else{
        if(//has results){
            return (
                     this.props.reducer.results.map((result, i) => {
                            return <Result key={'credit-card-result-' + i} >{result}</Result>;
                     })
            );
        }
        else {
            return (
                <div>no results found </div>
            );
        }
    }
}

但这似乎不起作用。我也想做一个elseif,但这也没有用。

2 个答案:

答案 0 :(得分:1)

我喜欢使用元素变量并有一个return语句。使用此方法,您可以像这样执行条件逻辑:

render() {
    let returnThis = null;
    if(//loading){
        returnThis = <div>loading</div>;
    if(//has results){
        returnThis = this.props.reducer.results.map((result, i) => {
                        return <Result key={'credit-card-result-' + i} >{result}</Result>;
                 })
        );
    } 
    else {
        returnThis = <div>no results found </div>;
    }

    return (
        <div>
            {returnThis}
        </div>
    );
}

以下是有关其条件渲染的更多信息:https://facebook.github.io/react/docs/conditional-rendering.html

答案 1 :(得分:0)

尝试this

CREATE TABLE `sicor`.`tb_AutSituacao` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `Nome` varchar(50) CHARACTER SET latin1 NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

CREATE TABLE `sicor`.`tb_AutHistorico` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `Situacao` int(11) NOT NULL,
 `Data` date NOT NULL,
 `Agente` int(11) NOT NULL,
 `Proposta` int(11) NOT NULL,
 PRIMARY KEY (`id`),
 KEY `AutHistorico_Situacao` (`Situacao`),
 CONSTRAINT `FK_Situacao` FOREIGN KEY (`Situacao`) REFERENCES `sicor`.`tb_AutSituacao` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;