3.4 JSX语法

优质

小牛编辑

126浏览

2023-12-01

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。它只是一种语法糖。它是类似 HTML 标签的表达式：

 <View style={styles.text}>
    <Text style={styles.title}>
      MAKE IT EASY TO DO BUSINESS ANYWHERE
    </Text>
    <Text style={styles.subtitle}>
      We aim to build the future infrastructure of commerce.
    </Text>
</View>

JSX 的含义

JSX 只是 JavaScript 语法的一个语法映射。 JSX 表达式执行函数调用，我们可以看成他就是调用 createElement() 方法的快捷方式。 Babel 内置的支持 JSX 语法的编译。在代码中声明 @jsx可以定制相应的函数调用：

// Tell Babel to transform JSX into createElement() calls: 
/* @jsx createElement */

import {createElement} from 'weex-rx';

<View /> // => createElement(View)

除了在代码中声明，我们可以通过在 .babelrc 中进行配置来达到相同的目的：

{
  "presets": ["es2015", "stage-1", "react"],
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "createElement"
    }]
  ]
}