React笔记：React基础（2）
1. JSX
JSX是一种拥有描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。
1.1 基本语法
JSX可以嵌套多个HTML标签，可以使用大部分符号HTML规范的属性。
TodoList.js：
import React, { Component } from 'react'
class TodoList extends Component {
render(){
return (
<ul>
<li>To Do</li>
<li>In Progress</li>
<li>Done</li>
</ul>
);
}
}
export default TodoList;
index.js：
import React from 'react';
import ReactDOM from 'react-dom'; import TodoList from './components/TodoList' ReactDOM.render(<TodoList />, document.getElementById('root'));
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
JSX中的HTML标签属性绝大多数与HTML规范一致，但是class和for这两个属性在JSX中需要写为className何htmlFor。
class和for是JavaScript中的保留字。
1.2 标签类型
在JSX语法中，使用的标签类型有两种：DOM类型标签和React组件类型标签。
使用DOM类型标签时，标签的首字母必须小写。
使用React类型标签时，组件名称的首字母必须大写。
React通过首字母的大小写判断渲染的是DOM类型标签，还是React组件类型标签。
// DOM类型标签
const element = <h1>Hello World</h1>;
// React组件类型标签
const element = <TodoList />;
// 嵌套使用
const element = {
<div>
<TodoList />
</div>
}
1.3 JavaScript表达式
在JSX中使用JavaScript表达式需要将表达式用大括号 {} 包括起来。
在JSX中使用表达式的两个场景：（1）通过表达式给标签属性赋值（2）通过表达式定义组件。
import React, { Component } from 'react'
class TodoList extends Component {
render() {
const todos = ['To Do', 'In Progress', 'Done'];
return (
<ul>
{
todos.map((item, index) =>
<li key = { index }> { item } </li>
)
}
</ul>
);
}
}
export default TodoList;
1.4 条件判断
JavaScript表达式要求必须有返回值，因此无法直接使用if else语句，解决方法：
◊ 使用三元运算符
◊ 设置变量并在属性中引用
◊ 将逻辑转化到函数中
◊ 使用&&运算符
1.4.1 三元运算符
import React, { Component } from "react"
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
isComplete: true
}
}
render() {
return (
<div className={ this.state.isComplete ? 'is-complete' : '' }> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
1.4.2 使用变量
import React, { Component } from "react"
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
isComplete: true
}
}
getIsComplete() {
return this.state.isComplete ? 'is-complete' : '';
}
render() {
let isComplete = this.getIsComplete();
return (
<div className={ isComplete }> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
1.4.3 使用函数
import React, { Component } from "react"
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
isComplete: true
}
}
getIsComplete() {
return this.state.isComplete ? 'is-complete' : '';
}
render() {
return (
<div className={ this.getIsComplete() }> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
1.4.4 使用逻辑与（&&）运算符
import React, { Component } from "react"
class HelloWorld extends Component {
constructor(props) {
super(props);
this.state = {
isComplete: true
}
}
render() {
return (
<div className={ this.state.isComplete && 'is-complete' }> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
1.5 标签属性
（1）当JSX标签属性是DOM类型的标签时，JSX支持对于DOM标签的属性。
JSX中的内联样式通过style属性来定义，但属性值必须为对象，且对象中的属性名需要使用camelCase（驼峰命名法）。
例：font-size改为fontSize。
import React, { Component } from 'react'
class TodoList extends Component {
render() {
const todos = ['To Do', 'In Progress', 'Done'];
return (
<ul style={{color: 'red', fontSize: '14px'}}>
{
todos.map((item, index) =>
<li key = { index }> { item } </li>
)
}
</ul>
);
}
}
export default TodoList;
（2）当JSX标签是React组件类型时，可以任意自定义标签的属性名。
HelloWorld.js
import React, { Component } from "react"
class HelloWorld extends Component {
render() {
return (
<div> Hello { this.props.name }! </div>
);
}
}
export default HelloWorld;
index.js：
import React from 'react';
import ReactDOM from 'react-dom'; import HelloWorld from './components/HelloWorld' ReactDOM.render(<HelloWorld name='World' />, document.getElementById('root'));
1.6 注释
JSX中，在标签子节点内的注释写在{}中。
import React, { Component } from 'react'
class TodoList extends Component {
render() {
const todos = ['To Do', 'In Progress', 'Done'];
return (
<ul style={{color: 'red', fontSize: '14px'}}>
{/* 注释 */}
{
todos.map((item, index) =>
<li key = { index }> { item } </li>
)
}
</ul>
);
}
}
export default TodoList;
JSX语法只是 React.createElement(component, props, ...children)的语法糖，所有的JSX语法最终都会被转换成该方法调用。
在项目智勇首选使用JSX语法。
React笔记：React基础（2）的更多相关文章
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- 【React】react学习笔记01-概念与基本使用
俺为啥要学这玩意: 家里的杂事好不容易处理完了,开始正式静下心来学习~博主是做后端开发的,js基础不深,之前也是用React写过许多东西了,但是基本上都是用的CV大法,别人的组 件修修改改拿来 ...
- React笔记_(3)_react语法2
React笔记_(3)_react语法2 state和refs props就是在render渲染时,向组件内传递的变量,这个传递是单向的,只能继承下来读取. 如何进行双向传递呢? state (状态机 ...
- React笔记：组件（3）
1. 组件定义 组件是React的核心概念,组件将应用的UI拆分成独立的.可复用的模块. 定义组件的两种方式: (1)类组件:使用ES6 class (2)函数组件:使用函数 使用class定义组件的 ...
- 【温故知新】—— React/Redux/React-router4基础知识&独立团Demo
前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...
- react笔记汇总
1.什么是React? a.React 是一个用于构建用户界面的 JAVASCRIPT 库. b.React主要用于构建UI,很多人认为 React 是 MVC 中的 V. c.React 起源于 F ...
- React笔记1
目录 1.react基础:类组件.函数式组件.ES5/ES6继承 2.生命周期钩子函数 3.什么是JSX 4.props和state有什么区别 5.路由配置 6.自定义封住组件 7.React 状态管 ...
- React学习笔记-1-什么是react，react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
随机推荐
- 一套代码小程序&Web&Native运行的探索04——数据更新
接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...
- 1.2环境安装「深入浅出ASP.NET Core系列」
官网 在介绍安装环境之前,先介绍周边信息,比如微软net官网. https://www.microsoft.com/net 这个网站是学习微软技术栈比较权威的地方,包括环境下载,学习,架构,文档,社区 ...
- 校园生活app结对开发第二天
昨天进行了android studio的安装与配置遇到很多问题,在gradel处遇到很多问题,安装版本错误等等,在百度和书籍的帮助下成功安装 今天要做登陆界面开发
- FTP方式部署Azure Web App
创建部署凭据 在仪表盘中创建或重置部署凭据,在凭据中设置用户名和密码. 通过FTP方式打开Web根目录 在本地资源管理器中打开FTP地址(例如:ftp://cnws-prod-sha-001.ftp. ...
- 【问题】VS问题集合，不用也要收藏防止以后使用找不到
在日常的使用或者工作当中我们的vs会时不时的给我一些小“惊喜”.让我们有时候无可奈何.这不今天我又遇到了所以我决定记录下这些,方便以后再次出现好解决. 无法启动iis express web 服务器 ...
- windows如何安装memcached
官网上并未提供 Memcached 的 Windows 平台安装包,我们可以使用以下链接来下载,你需要根据自己的系统平台及需要的版本号点击对应的链接下载即可: 32位系统 1.2.5版本:http:/ ...
- 性能测试 基于Python结合InfluxDB及Grafana图表实时监控Android系统和应用进程
基于Python结合InfluxDB及Grafana图表实时监控Android系统和应用进程 By: 授客 QQ:1033553122 1． 测试环境 2． 实现功能 3． 使用前提 4． ...
- 解决OracleOraDb10g_home1TNSListener服务无法启动
造成OracleOraDb10g_home1TNSListener服务无法启动可能有三种情况: listener.ora文件配置有错误导致无法启动 相关环境变量没设置好 删除客户端时导致服务端相关注册 ...
- win10下安装mysql5.7.25版本
之前使用mysql都是使用的xampp上面集成的mysql,也在安装过5.6.35的版本,好像都是下一步下一步就完成了,昨天安装了一个5.7.25的版本的mysql,也不知道怎么了,就开始百度一些东西 ...
- sql 上舍下舍運用
[四舍五入取整截取] select round(54.56,0) [向下取整截取] SELECT FLOOR(54.56) [向上取整截取] SELECT CEILING(13.15) --MS ...