文档章节

React jsx 中写更优雅、直观的条件运算符

开源中国最帅没有之一
 开源中国最帅没有之一
发布于 06/21 21:00
字数 647
阅读 31
收藏 1

这篇文字中我学到了很多知识,同时结合工作中的一些经验也在思考一些东西。比如条件运算符

Conditional Operator

condition ? expr_if_true : expr_if_false

jsx中书写条件语句我们经常都会使用到的就是三目运算符(?:)也叫内联条件运算符,可能大家都有体会三目运算符并不是一种直观的书写方式。特别是在复杂情况下时。

拿上面文章中的代码举个

return (
  <div>
    <p>Text: {this.state.text}</p>
    {
      view
      ? null
      : (
        <p>
          <input
            onChange={this.handleChange}
            value={this.state.inputText} />
        </p>
      )
    }
  </div>
);

上面的代码是根据view变量为false时显示一个p元素

或者是下面这样显示不同的元素或组件

return (
  <div>
    <p>Text: {this.state.text}</p>
    {
      view
      ? (
        <p>
          something value
        </p>
      ) : (
        <p>
          <input
            onChange={this.handleChange}
            value={this.state.inputText} />
        </p>
      )
    }
  </div>
);

过多的javascript三目运算符在jsx中看起来并不那么容易,逻辑区分有时也会变的复杂

如果你又一些嵌套,情况会更复杂(大部分eslint并不能使用嵌套)

return (
  <div>
    { condition1
      ? <Component1 />
      : ( condition2
        ? <Component2 />
        : ( condition3
          ? <Component3 />
          : <Component 4 />
        )
      )
    }
  </div>
);

上面的代码我也遇到过,维护起来就像在沼泽里行走

我尝试着思考,能否将这种条件运算符进行更高级别的抽象,然后使用React组件实现它们呢?

经过尝试确实是可行的,于是我做了一些东西。抽象后jsx条件运算就像下面这样

根据某个变量的值显示某个组件

<If when={this.state.logic}>
  <p>↔️show component</p>
</If>

同上,但是具有更高的可读性,而且逻辑和美观程度上优越于三目运算符

<If when={this.state.logic}>
  <p>↔️show component</p>
  <If when={this.state.logic}>
    <p>other component</p>
  </If>
</If>

还有更多的选择,我应该不用做过多解释就能看明白下面的代码了

<Switch value={value}>
  <Case when={condition}>
    <p>condition 1</p>
  </Case>
  <Case when={condition}>
    <p>condition 2</p>
  </Case>
  <Case when='c' children={<p>condition 3</p>}/>
  <Default children={<p>default component</p>}/> {/*可提供一个默认组件*/}
</Switch>

遍历一个arrayobject

<For of={['a', 'b', 'c']}>
  {(item, index) => (<p key={index}>{index}:{item}</p>)}
  <Default>default component</Default> {/*可提供一个默认组件*/}
</For>

我创建这个仓库供大家尝试

你又任何想法?欢迎讨论。

感谢阅读

© 著作权归作者所有

共有 人打赏支持
开源中国最帅没有之一

开源中国最帅没有之一

粉丝 41
博文 20
码字总数 11484
作品 5
成都
程序员
加载中

评论(2)

开源中国最帅没有之一
开源中国最帅没有之一

引用来自“OSC_LvJiwU”的评论

又封装成vue语法了吗?<template v-if="condicondition"></template>
出发的初衷不是这,只是为了在jsx中更好的使用条件语法
OSC_LvJiwU
OSC_LvJiwU
又封装成vue语法了吗?<template v-if="condicondition"></template>
[译] React 实现条件渲染的多种方式和性能考量

原文地址:8 React conditional rendering methods 原文作者:Esteban Herrera 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Dong Han 校对者:Jessica Shao,doc...

卷头驴先生
07/06
0
0
Web 开发的未来:React、Falcor 和 ES6

Widen是一家数字资产管理解决方案提供商。目前,其技术栈还非常传统,包括服务器端的Java、浏览器端的AngularJS、提供REST API支持的Jersey以及jQuery、 Underscore、lodash、jQuery UI和Boo...

oschina
2015/10/19
8.4K
28
react jsx 中的条件判断

想知道怎么拓展标签的, 请看我另一篇文章 http://my.oschina.net/wolfx/blog/707181 react jsx 中的条件判断 说到条件判断,很容易想到的就是if,有很多模版引擎都是这样处理的. 但是,上面的代...

WolfX
2016/02/28
1K
0
react学习(3)-jsx语法

深入JSX JSX是一个JavaScript语法扩展,类似于XML。你可以使用React,可以进行JSX语法到JavaScript的转换 Why JSX? react不是必须使用JSX。你可以使用普通的JS。然而,我们建议使用JSX因为它...

Yohance
2016/09/26
59
0
轻松入门React和Webpack

说说React 一个组件,有自己的结构,有自己的逻辑,有自己的样式,会依赖一些资源,会依赖某些其他组件。比如日常写一个组件,比较常规的方式: 通过前端模板引擎定义结构JS文件中写自己的逻...

WolfX
2016/02/27
228
0

没有更多内容

加载失败,请刷新页面

加载更多

利用碎片化时间Get Linux系统

起初,我做着一份与IT毫无关系的工作,每月领着可怜的工资,一直想改变现状,但无从下手,也就是大家熟知的迷茫。我相信,每一个人都会或多或少的经历过迷茫,迷茫每一个选择,迷茫工作或者生...

linuxprobe16
今天
5
0
OSChina 周日乱弹 —— 恨不得给你买张飞机挂票

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @开源中国首席灵魂师:分享张希/曹方的单曲《认真地老去》 来不及认真的年轻过,就认真的老去! 《认真地老去》- 张希/曹方 手机党少年们想听...

小小编辑
今天
281
6
如何实现靠谱的分布式锁?

分布式锁,是用来控制分布式系统中互斥访问共享资源的一种手段,从而避免并行导致的结果不可控。基本的实现原理和单进程锁是一致的,通过一个共享标识来确定唯一性,对共享标识进行修改时能够...

郑加威
今天
3
0
Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
5
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部