React：将html元素统一管理

写React组件，基本上使用jsx文件，在render方法中返回html节点。然而，在jsx中的html标签中的js代码，只能是简单运算，对象，或函数调用，并不支持if-else或for-while等结构，因此，有时我们需要根据条件决定不同元素，或决定是否显示某元素时，不得不将这段代码抽到render-return以外，如此，程序虽然可以运行，代码上却破坏了html骨架结构，不便于样式控制和直观理解。这里介绍几种方法解决此问题，使得所有html元素在一处得到统一管理。

1 简单if-else

可以使用三元运算符

 render(){
        return (
            <div>
                {1 > 2 ? <p>yes</p> : <a>no</a>}
            </div>
        )
    }

2 switch结构

可以利用对象的map特性

    name: 'lucy',
    render(){
        return (
            <div>
                {{
                    'bob': <p>i am bob</p>,
                    'alan': <p>i am alan</p>,
                    'lucy': <p>i am lucy</p>
                    }[this.name]}
            </div>
        );
    }

3 复杂逻辑

包括集合处理以及复杂的条件判断，应该将算法和数据分离，并将算法单独封装起来以实现简单调用

如map

 render(){
        return (
            <div>
                {['you', 'are', 'good'].map((v, i)=>{
                    return <p key={i}>{v}</p>
                    })}
            </div>
        );
    },

如复杂判断

    render(){
        return (
            <div>
                {this.shouldShow(
                <p>yes</p>,
                <p>no</p>)}
            </div>
        )
    },

    shouldShow(yesContent, noContent) {
        let ok;
        // 检查条件1……
        // 检查条件2……
        // ……
        if (ok) return yesContent;
        else return noContent;
    }

 

综上，我们可以将组件中的html元素统一到一处进行管理。特别注意，html部分应该强调文档结构、骨架，即，有哪些内容，如何连接，而不应该夹杂过多的逻辑代码，因此，此处应该只使用简单的控制语句或算法调用，而不应该写复杂的js代码。判断标准：js代码是否短小精干，一目了然。