通过 JSX Control Statements 编写 JSX
一、前言一些开发者,特别是有使用过「模板技术」的开发者(例如 Handlebars),刚开始尝试使用 React 编写应用时,可能会惊讶的发现,JSX 竟然没有内建支持类似其它模板引擎似的任何结构控制语句或指令。但这就是 JSX,它就是这么设计的,JSX 不是传统的模板,也不需要某个模板引擎去解析。大体上,可以将 JSX 看成普通 JavaScript 表达式的语法糖。 下边的的代码是一个「普通的 JavaScript 代码示例」 render () { return (if(true){ ... }else{ ... }); } 如上代码不合法的,同样,下边的 jsx 代码也是不合法的 render () { return (<div> {if(true) <span>1</span> else <span>2</span> } </div>); } 因为,JavaScript 不能在一个「表达式」中嵌入「控制语句」。 二、能做什么?JSX-Control-Statements 为 JSX 增加了基本的结构控制语句,比如条件和循环控制语句。通过将插件将「组件风格」的控制语句最终转换为普通 JS 代码,例如: <If condition={condition()}>Hello World!</If> 将会转换为 condition() ? 'Hello World!' : null 三、实现原理及说明这看起来,似乎很容易实现,通过一系列表组件好像就能实现,但事实上这在 React 中这是不可行的,如果用「组件」的方式实现,类似如下代码 <ul> <ForComponent each="item" index="index" of={list}> <li key={index}>{item.title}</li> </ForComponent> </ul> 组件的方式实现上边的代码,将会抛出来一个错误 因为 React 在执行到 ForComponent 时就是会执行它的 children ,想达到目的,需要延后执行 FormComponent 的 children,那么只能用一个 function 包裹,并在这个函数中返回 jsx 表达式,但这将比直接写 map 方法还麻烦。 所以, 四、安装需要先行安装好 Babel,之后通过 npm 安装 npm install --save-dev jsx-control-statements 还需要在 { ... "plugins": ["jsx-control-statements"] } 五、核心语法If 标签用来表示最简单的条件判断逻辑 // 简单示例 <If condition={ true }> <span>IfBlock</span> </If> // 包括多个子元素及表达式 <If condition={ true }> one { "two" } <span>three</span> <span>four</span> </If> <If>if 的 body 部分只有在 condition 为 true 才会渲染
<Else /> (deprecated)Eles 已废弃,不推荐使用,它会破坏 JSX/XML 的语法,并且影响自动格式化。 转换If 标签将会预编译为「三元表达式」 // 转换前 <If condition={ test }> <span>Truth</span> </If> // 转换后 { test ? <span>Truth</span> : null } Choose 标签Choose 是比 If 更复杂分支结构写法 <Choose> <When condition={ test1 }> <span>IfBlock</span> </When> <When condition={ test2 }> <span>ElseIfBlock</span> <span>Another ElseIfBlock</span> <span>...</span> </When> <Otherwise> <span>ElseBlock</span> </Otherwise> </Choose> // default block is optional; minimal example: <Choose> <When condition={true}> <span>IfBlock</span> </When> </Choose> <Choose>Choose 的子元素只允许出现 <When>和
<Otherwise>没有任何一个 转换Choose 标签同样将会预编译为「三元表达式」 // 转换前 <Choose> <When condition={ test1 }> <span>IfBlock1</span> </When> <When condition={ test2 }> <span>IfBlock2</span> </When> <Otherwise> <span>ElseBlock</span> </Otherwise> </Choose> // 转换后 { test1 ? <span>IfBlock1</span> : test2 ? <span>IfBlock2</span> : <span>ElseBlock</span> } For 标签
// 注意,需要指定 key 属性 <For each="item" of={ this.props.items }> <span key={ item.id }>{ item.title }</span> </For> <For each="item" index="idx" of={ [1,2,3] }> <span key={ idx }>{ item }</span> <span key={ idx + '_2' }>Static Text</span> </For>
注意, 转换// 转换前 <For each="item" index="index" of={ items )}> <span key={ item.id }>{ index }. { item.title }</span> </For> // 转换前 { items.map( function(item,index) { <span key={ item.id }>{ index }. { item.title }</span> }) } With 标签用于将值赋给局部变量 // 简单用法 <With foo={ 47 } bar={ 'test' }> <span>{ foo }</span> <span>{ bar }</span> </With> // 嵌套使用 <With foo={ 47 }> <With bar={ 'test' }> <span>{ foo }</span> <span>{ bar }</span> </With> </With>
注意,定义的「变量」仅在 With 块中可用。 转换
// 转换前 <With foo={ 47 }> <span>{ foo }</span> </With> // 转换后 { (function(foo) { return <span>{ foo }</span> }).call(this,47) } 六、对比普通 JS/JSX 写法的对比带来的好处
一点小问题
七、如何进行语法检查?ESLint所有结构控制标签都是通过 Babel 插件进行转义的,不需要 但是,有一个 ESlint 插件可处理这个问题 -- end -- (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |