React JSX语法简介

techbrood 发表于 2017-01-17 16:44:19

标签: jsx, react, javascript

- +

JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)

在React中,JSX是一个使用 React.createElement() API的快捷方式,代码看起来更象一个UI组件。

每个标签,比如 <View />, 被转换成一个 React.createElement() 调用。而其中包含的attributes则成为实例化组件对象的props。属性(Attributes)可以是字符串比如 foo='hello',或者使用大括号包含起来的内嵌JS表达式,比如 bar={baz},baz将引用变量baz。

标签可以是自闭合的,比如 <View />,或者使用一个开始和关闭标签,如 <View></View>

要包含子元素,得使用开始和关闭标签,这样才能把子元素放进去。

JSX代码示例如下:

const a = <View />

const b = (
  <View
    foo='hello'
    bar={baz}>
    <Text>42</Text>
  </View>
)

使用Babel编译后的JS代码如下:

var a = React.createElement(View, null);

var b = React.createElement(
  View,
  {
    foo: 'hello',
    bar: baz },
  React.createElement(
    Text,
    null,
    '42'
  )
);

你可以自己在线试试看(提示:点击JS面板设置中的编译按钮

blob.png,可以看到编译后的代码)。

possitive(2) views3828 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章