react系列(2)表达式语法
来源:互联网 发布:tcp udp 端口 编辑:程序博客网 时间:2024/05/29 08:03
React中的表达式用两个大括号{}表示,表达式内容可以是计数、三元表达式、变量和数组等。本篇简要介绍这几种表达式的用法。
计数语法:
ReactDOM.render(<div><h1>{1+1}</h1></div>, document.getElementById('example'));结果是2
三元表达式语法:
var i = 1; ReactDOM.render(<div><h1>{i == 1 ? 'True!' : 'False'}</h1></div>, document.getElementById('example'));
内联样式语法:
var myStyle = { fontSize: 50, color: '#FF0000' }; ReactDOM.render(<h1 style={myStyle}>Hello World</h1>,document.getElementById('example'));
外联样式语法:
ReactDOM.render(<h1 className="red">Hello World</h1>,document.getElementById('example'));(注)组件class属性需要写成className,for属性需要写成 htmlFor,这是因为class和for是JavaScript的保留字。
数组变量语法:
var arr = [ <h1 key="1">key1</h1>,<h1 key="2">key2</h1>,];ReactDOM.render(<div>{arr}</div>,document.getElementById('example');
结果为两个<h1>标签均添加到<div>标签内。
阅读全文
0 0
- react系列(2)表达式语法
- ReactJS学习系列课程(React ES6语法使用)
- React Native学习笔记(2)--React与JSX语法
- React(2) JSX语法
- 《React-Native系列》6、Navigator语法介绍及经典应用
- React(3) react 语法
- 正则表达式语法(2次复习)
- 正则表达式语法2
- react系列(8)refs
- React.js语法学习总结(一)
- React.js语法学习总结(二)
- 浅谈React的JSX语法(一)
- 浅谈React的JSX语法(二)
- React学习(二)JSX语法
- React入门狂想曲(二)-JSX语法
- ReactJS学习系列课程2(React环境搭建)
- JavaScript语法入门系列(七) 类和对象(正则表达式RegExp)
- [Java]“语法糖”系列(二)之Lambda表达式/匿名函数(Lambda Expression)
- 有权图中的最短路径问题--Dijkstra算法(Java语言实现)
- ASP.NET GridView用法大全
- 《JAVA编程思想》学习笔记-基本类型
- 数据结构——二叉树——反转二叉树
- 商城项目总结
- react系列(2)表达式语法
- 做技术,有没有必要参加IT培训
- Linux(centos7)下安装OpenSSL 安装图文详解
- 【java】--sleep wait 小结
- 排序法-改良的选择排序(C)
- 算法学习(一)-----朱流算法
- S-Nim HDU
- 结构体的使用以及结构体内存对齐
- 好久不更新博客,关于spark-scala上开发的总结