专栏首页IMWeb前端团队React学习笔记之JSX

React学习笔记之JSX

本文作者:IMWeb json 原文出处:IMWeb社区 未经同意,禁止转载

什么是JSX?

JSX 是一个看起来很像 XML 的 JavaScript语法扩展。React 可以用来做简单的 JSX 句法转换。 下面看一段React组件的代码:

//  未使用JSX

React.render(
    React.createElement('ul', { className: 'list' },
        React.createElement('li', null, 'fist li'),
        React.createElement('li', null, 'second li'),
        React.createElement('li', null, 'third li')
    ),
    document.getElementById('example')
);
// 使用JSX

React.render(
    <ul class="list">
        <li>fist li</li>
        <li>second li</li>
        <li>third li</li>
    </ul>,
    document.getElementById('example')
);

可以看出在React中直接使用纯javascript或者使用JSX都是可以的,只是使用JSX会使搭建 React 应用更加简单,代码可读性更好。

JSX将XML语法直接加入到JavaScript代码中,能定义简洁且我们熟知的包含属性的树状结构语法。

JSX的特点

  • 类XML语法容易接受,让复杂的树更易于阅读
  • 增强JS语义
  • 代码模块化
  • 代码可读性好

JSX语法

1、 HTML标签 与 React组件 对比

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。 要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

要渲染 React 组件,只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

2、属性表达式

要使用 JavaScript表达式作为属性值,只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 ("")。

var person = <Person name={window.isLoggedIn ? window.name : ''} />;

var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

3、子节点表达式

组件与组件之间就像标签与标签之间可以有嵌套关系,与HTML不同的是可以在子节点中使用求值表达式。

var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;

var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

4、注释

JSX 里添加注释很容易;它们只是 JS 表达式而已。只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。

var content = (
  <Nav>
    {/* 一般注释, 用 {} 包围 */}
    <Person
      /* 多
         行
         注释 */
      name={window.isLoggedIn ? window.name : ''} // 行尾注释
    />
  </Nav>
);

5、样式

在 React 中,行内样式并不是以字符串的形式出现,而是通过一个特定的样式对象来指定。在这个对象中,key 值是用驼峰形式表示的样式名,而其对应的值则是样式值,通常来说这个值是个字符串

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // 注意这里的首字母'W'是大写
  msTransition: 'all' // 'ms'是唯一一个首字母需要小写的浏览器前缀
};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);

参考文章

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React学习笔记之JSX

    什么是JSX? JSX 是一个看起来很像 XML 的 JavaScript语法扩展。React 可以用来做简单的 JSX 句法转换。 下面看一段React组件的...

    IMWeb前端团队
  • Why you shouldn`t use Preact, Fast-React, etc. to replace React today

    本文作者:IMWeb nixzheng 原文出处:IMWeb社区 未经同意,禁止转载 生命在于折腾,Coder的折腾就在于造各种轮子。React在前端...

    IMWeb前端团队
  • Why you shouldn`t use Preact, Fast-React, etc. to replace React today

    生命在于折腾,Coder的折腾就在于造各种轮子。React在前端圈大火之后,轮子层出不穷。而其中的一些轮子,由于专注于解决很多人诟病的React过大、过慢的问题...

    IMWeb前端团队
  • React学习笔记之JSX

    什么是JSX? JSX 是一个看起来很像 XML 的 JavaScript语法扩展。React 可以用来做简单的 JSX 句法转换。 下面看一段React组件的...

    IMWeb前端团队
  • 深入理解 JSX

    JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。 为什么要使用 JSX? 你不需要为...

    xiangzhihong
  • JS示例23-隔行换色(li列表)

    专注APP开发
  • React语法基础之JSX

    概述 React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 JSX是什么 JSX是Rea...

    xiangzhihong
  • cssjshtml javascript控制多视频播放

    葫芦
  • Jquery dom搜索之siblings()方法

          如果给定一个dom的元素集合的算则其对象,siblings()方法允许我们在dom树中搜索这个元素集合的同胞元素,并匹配这些元素构造一个新的对象,J...

    郑小超.
  • react技术问题十问十答

    最近在开源中国搞了个问答活动,收到了不少网友关于React的提问,本文挑选出一些比较典型的问题总结一下,对问答感兴趣的同学可以移步这里

    前端迷

扫码关注云+社区

领取腾讯云代金券