星空网 > 软件开发 > 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代码是否短小精干,一目了然。




原标题:React:将html元素统一管理

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Shopee 12.12平台访问量激增6倍, 跨境配饰居家3C美妆热卖:https://www.goluckyvip.com/news/5778.html
全国首个跨境电商海外仓国家标准正式启动:https://www.goluckyvip.com/news/5779.html
速卖通、lazada代运营,要知道什么?:https://www.goluckyvip.com/news/578.html
Shopee巴西站会是“蓝海”吗?:https://www.goluckyvip.com/news/5780.html
TikTok的广告类型及投放:https://www.goluckyvip.com/news/5781.html
亚马逊自发货用什么物流?亚马逊自发货哪个好?:https://www.goluckyvip.com/news/5782.html
83万单,Halara的TikTok美国小店爆单思路拆解:https://www.kjdsnews.com/a/1836319.html
83万单,Halara的TikTok美国小店爆单思路拆解:https://www.goluckyvip.com/news/186217.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流