你的位置:首页 > Java教程

[Java教程]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代码是否短小精干,一目了然。