React学习笔记之JSX
什么是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);参考文章
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录