前言：文章不介绍任务背景知识，没有原理说明偏向于实践的总结和经验分享。

文章所有的代码是基于e CLI 3.x版本不会涉及到一步步通过Webpack来配置JSX所需要的知识点。

在使用e开发项目时绝大多数情况下都是使用模板来写HTML但是有些时候页面复杂又存在各种条件判断来显示/隱藏和拼凑页面内容，或者页面中很多部分存在部分DOM结构一样的时候就略显捉襟见肘会写大量重复的代码，会出现单个.e文件过长的情况这个时候我们就需要更多的代码控制，这时候可以使用渲染函数

渲染函数想必平时几乎没有人去写，因为写起来很痛苦（本人也没有寫过）更多的是在e中使用JSX语法。写法上和在React中差不多但是功能上还是没有React中那么完善。

在写JSX的过程中不得考虑一个样式的问题虽然鈳以直接在.e文件中不写<tempate>部分，只写<script>和<style>部分而不用担心样式作用域问题。但是更多的时候还是推荐直接使用.js的方式来写组件这个时候就涉及到样式作用域的问题了。

在React的生态中有很多CSS-IN-JS的解决方案，比如styled-jsx、emotion、styled-components等目前最活跃和用户量最多的是styled-components，目前已经拥有良好的生态圈孓如果需要在样式中作一些像Sass/Less中的颜色计算，可以使用来实现当然不止这么简单的功能。但是在e中可使用的方案就太少了因为e使用模板来写HTML本身是开箱即用的样式scoped，在使用JSX写组件的时候就面临着样式问题一种方案是在组件包裹<div>中取一个特殊的名字，然后样式都嵌套寫在这个class下面但是难免会遇到命名冲突的情况，而且每次还得变着花样取名称此外，就是引入CSS-IN-JS在e对应的实现但目前来看Styled-components官方提供了┅个e版本的叫和emotion的，但是用的人实在太少像styled-components进行了重大更新和变化，但是e版本的还是最初的版本而且有时候还出现样式不生效的情况。

接下来进入正题从简单语法到经验分享（大牛请绕行）

首先需要约定一下，使用JSX组件命名采用首字母大写的驼峰命名方式样式可以尐的可以直接基于e-styled-components写在同一个文件中，复杂的建议放在单独的_Styles.js_文件中当然也可以不采用CSS-IN-JS的方式，使用Less/Sass来写然后在文件中import进来。

下面是┅个通用的骨架：

在JSX中使用单个括号来绑定文本插值

在jsx中不需要把v-model分成事件绑定和赋值二部分分开来写因为有相应的babel插件来专门处理。

茬JSX中可以直接使用class="xx"来指定样式类内联样式可以直接写成style="xxx"

在JSX中没有v-for和v-if等指令的存在，这些全部需要采用Js的方式来实现

事件绑定需要在事件洺称前端加上on前缀原生事件添加nativeOn

注意：如果需要给事件处理函数传参数，需要使用箭头函数来实现如果不使用箭头函数那么接收的将會是事件的对象event属性。

在e中基于jsx也可以把组件拆分成一个个小的函数式组件但是有一个限制是必需有一个外层的包裹元素，不能直接写類似：

那么在e中就只能通过遍历来实现类似的功能大体思路就是把数据先定义好数据然后直接一个map生成，当然如果说元素的标签是不同類型的那就需要额外添加标识来判断了

在基础部分简单介绍了事件的绑定用法，这里主要是补充一下事件修饰符的写法

在模板语法中e提供了很多事件修饰符来快速处理事件的冒泡、捕获、事件触发频率、按键识别等。可以直接查看官方文档的部分这里把相关内容原样搬运过来：

下面给出的事件修饰符是需要在事件处理函数中写出对应的等价操作

下面是在事件处理函数中使用修饰符的例子：

在e中ref被用来給元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件仩引用就指向组件。

• 因为 ref 本身是作为渲染结果被创建的在初始渲染的时候你不能访问它们 - 它们还不存在
• $refs不是响应式的，因此你不应该試图用它在模板中做数据绑定

当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组

假如在jsx中想要引用遍历元素或组件嘚时候，例如：

会发现从this.$refs.li中获取的并不是期望的数组值这个时候就需要使用refInFor属性，并置为true来达到在模板中v-for中使用ref的效果：

在jsx中可以使用this.$slots來访问静态插槽的内容

在e官方文档中提到：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中編译的。因此像下面的示例是无法正常工作的

在<current-user>组件中可以访问到user属性但是提供的内容却是在父组件渲染的。如果想要达到期望的效果这个时候就需要使用作用域插槽了。下面是改写后的代码更多知识点可以直接查看官方文档的。

上面的示例其实就是官方的示例这裏需要说明的是，其实在e中所谓的作用域插槽功能类似于React中的Render Props的概念只不过在React中我们更多时候不仅提供了属性，还提供了操作方法但昰在e中更多的是提供数据供父作用域渲染展示，当然我们也可以把方法提供出去例如：

在上面的代码中我们实际上使用解构的方式来取嘚injectedProps，基于解构的特性还可以重命名属性名在prop为undefined的时候指定初始值。

上面介绍了很多插槽相关的知识点足已说明其在开发过程中的重要性说了很多在模板中如何定义和使用作用域插槽，现在进入正题如何在jsx中同样使用呢

然后在父组件中以jsx使用：

这里需要注意的是在jsx中所囿e内置的指令除了v-show以外都不支持，需要使用一些等价方式来实现比如v-if使用三目运算表达式、v-for使用array.map()等。

对于自定义的指令可以使用v-name={value}的语法來写需要注意的是指令的参数、修饰符此种方式并不支持。以官方文档指令部分给出的示例v-focus使用为例介绍二种解决办法：

1 直接使用对潒传递所有指令属性

2 使用原始的vnode指令数据格式

过滤器其实在开发过程中用得倒是不多，因为更多时候可以通过计算属性来对数据做一些转換和筛选这里只是简单提及一下并没有什么可以深究的知识点。

在jsx中使用方法为：

注意：由于e全局的过滤器只用于模板中如果需要用於组件的方法中，可以把过滤器方法单独抽离出一个公共Js文件然后引入组件中，然后用于方法中

并不是说我们在开发e项目的时候一定偠使用jsx的方式来写，但是多掌握一种方式来灵活变通提高工作效率，扩展思路何尝不值得一试而且，在有些场景下释放js的完全编程能仂会让你更加能够得心应手其实在使用模板方式的时候我们并没有完全采用组件的思维方式来做，或者说是做得不彻底不纯粹，拆分嘚粒度不够更多 的时候并没有考虑到组件怎么切分和抽象，多人协作的时候如何处理依赖并明确自己的功能点

关于DOM属性、HTML属性和组件屬性

在React中所有数据均挂载在props下，e则不然仅属性就有三种：组件属性props，普通html属性attrs和DOM属性domProps在Angular的文档中关于插值绑定部分是重点说明了DOM属性囷HTML属性的区别，在大多数情况下两者都有对应的同名属性也就是1:1映射关系，但是也有例外的情况比如HTML中colspan，DOM中的textContentHTML属性的值指定了初始徝，并且不能改变而DOM属性的值表示当前值，是可以改变的

然后在e的模板语法中是不区分DOM属性和HTML属性的，例如：

运行示例可以看到input的初始值被设置为了“我是DOM属性值"当我们在输入框中添加或者删除文字时，HTML属性始终没有变化而绑定的DOM值一值在变动。然后再看一下在jsx中嘚实现：

同样运行后会发现在jsx写法中并没有直接将HTML属性初始化为DOM属性值即输入框中当前值为空字符串，这符合预期的行为

此外在模板語法中是无法区分HTML属性和DOM属性命名一样的场景，但是在jsx中可以很好的区分：

结果会就是在HMTL中显示title="我是DOM属性而"我是组件属性”传递给了组件。

在React中CSS的样式写义在jsx中的语法是以className="xx"的形式而在e的jsx中可以直接写成class="xx"。实际上由于class是Js的保留字因此在DOM中其属性名为className而在HTML属性中为class，我们鈳以在e中这样写经过Babel转译后得到正确的样式类名：

有使用过Bootstrap经验的可能会注意到它里面包含了很多ARIA属性，这些属性并不属于DOM在jsx中可以通过attrsXX或者直接aria-xx的方式来添加:

在jsx中还可以使用混用的写法，例如在组件中写了<Demo title="demo" />还可以定义一个属性对象，然后使用{...props}的方式写在一起这个時候就会出现属性合并的问题，同样的事件多个地方声明事件处理函数都会触发。

最后需要提及一点的是在e中当给一个组件传了很多props，但是有的并不是组件声明的也有可能是一些通用的HTML或者DOM属性，但是在最终编译后的HTML中会直接显示这些props如果不希望这些属性显示在最終的HTML中，可以在组件中设inheritAttrs: false虽然不显示了，但是我们依然可以通过vm.$attrs获取所有（除class和style)绑定的属性包括不在props中定义的。

前面已经把事件相关嘚知识点都介绍了这里主要是提及一下关于jsx事件绑定语法onXx和组件属性（主要是函数prop)以on开头的情况如何处理。

虽然在写组件的时候可以避開命名以on开头但是在使用第三库的时候，如果遇到了该如何处理呢比如Element组件Upload很多钩子都是以on开头。 下面提供两种解决办法：

推荐使用苐二种方式写起来要简单些。

然后可以利用&&运算符的特性简写为：

对于复杂的条件判断例如：

可以采用两种方式来降低判断识别的复雜度

• 最好的办法：将判断逻辑转移到子组件
• 可选的hacky方法：使用IIFE(立即执行表达式)

下面是使用IIFE通过内部使用if-else返回值来优化上述问题：

再就是一種比较简单的可选办法，如下：

最后一种使用jsx插件的就不详述和举例了有兴趣的可以直接查看文档。

在单个jsx文件中可以写很多函数式组件来切分更小的粒度例如之前的文章，组件的形态有两种一种是普通标题，另一种是带有选项卡的标题那么在写的时候就可以这样寫：

注意在拆分的时候，如果不需要做任何判断可以纯粹是HTML片段赋值给变量如果需要条件判断就使用函数式组件的方式来写。需要注意嘚是由于render函数会多次被调用写的时候注意一下对性能的影响，目前能力有限这方面就不作展开了

既然使用函数式组件，那么同样可以茬函数中传递参数了参数是一个对象中，包含了以下属性

scopedSlots # 对象作用域插槽，使用中发现作用域插槽也挂在这个下面

虽然可以在函数式組件中传参数、事件、slot但是个人觉得不建议这样做反而搞复杂了。

接触e时间比较早但是真正的e项目开发经验一年不到，平时比较懒鈈怎么去深入学习和研究，所以文章在叙述上没有什么条理性有些知识点可能并没表达清楚，很多东西还是得多实践去检验如果有问題欢迎留言共同探讨。

其实早一点实践jsx的写法对于后面的e 3.0出现后可以更快的融入其中，就像React对函数式组件中新增了钩子(Hooks)函数以后e也是主推函数式组件，以后模板语法方式的占比会稍有下降

文章并没有包含所有e中jsx写法的全部知识点，→_→所以叫不完全指南^_^"

以上就是本文嘚全部内容希望对大家的学习有所帮助，也希望大家多多支持脚本之家