看看这个小画廊网页应用，智能家居物联网，你认为它是完全用UI5写的吗？正确的答案是"是"，但是在语义用户界面和ui5jsx渲染器的帮助下，

这个博客是为了给我在insidetrack:Timisoara的演示做一个快速的调侃。我们将浏览一下一些有用的JSX技术，双线服务器租用，这些技术用于构建自定义控件，我在gallery应用程序的整个开发过程中都使用过。

JSX简介

JSX是由ReactJS推广的JavaScript语法扩展。JSX的强大之处在于它可以与正则JavaScript表达式混合使用。为了工作，需要使用BabelJS将其编译（或"transpile"）回正常的JavaScript。

下面的ReactJSJSX代码片段：

被编译成下面的JavaScript代码：

为了在JSX中嵌入表达式，我们只需要用花括号将JS表达式包围起来。JavaScript和JSX的嵌套可以递归到几乎任何级别。它允许你写这样的东西：

然后把它编译成这样的东西：

注意，怎么做淘客，当我们查看编译后的代码时，很难理解我们实际呈现的是什么？即使你手工编写并介绍一些助手方法，数据分析法，也会很难看，很难掌握。

技巧

现在我们已经掌握了JSX的基本概念，让我们看看gallery应用程序中的一些简单示例。在下面的代码片段中，为了简洁起见，我将省略自动生成的id，并考虑oC变量包含自定义控件。我们将在运行时查看JSX代码和呈现的输出。

所有JSX技术中最基本的技术之一：简单地将一些"动态"文本添加到一些静态HTML中。通过"dynamic"，我的意思是从自定义控件的属性或某个变量中获取。

（控件有一个字符串属性标题，值为"title"）

这个也相当简单：它允许您有条件地呈现DOM的子树。它基于逻辑运算符在JavaScript中使用非布尔值时的工作方式。

当您具有数组属性或以某种方式获得数组（例如使用拆分）并希望为每个数组元素呈现DOM子树时，可以很容易地使用此方法。

（控件具有值为a.png的属性字符串[]images"，"b.png"，返利app可信吗，"c.png"]

当您有多基数聚合时，您将不可避免地希望在循环中呈现每个子控件：

（该控件具有包含三个子控件的聚合权限）

当您基于属性值（或其他条件）动态添加类时，这非常有用。这可以用来实现类似于标准工具栏设计机制的效果

（控件有一个字符串属性图标）

只要控件处于两种不同的状态，而这两种状态的区别仅仅在于CSS类的存在，您可以执行以下操作：

（该控件有一个布尔属性处于活动状态）

其他示例

如果您希望看到更多具体的示例，如以下控件：

那么您可以在GitHub上查看这两个存储库：

https://github.com/serban-petrescu/ui5-jsx-gallery/tree/master/src/controlhttps://github.com/serban-petrescu/serban-petrescu.github.io/tree/source/src/bulma/control