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非常相似. ...
随机推荐
- linux下安装libcurl及开源库的一般安装步骤
前言 总有人说:要多看源代码!那么源代码去哪找呢?找到了又该怎么安装呢?本票博客不介绍如何使用和学习,只要讲获取和安装,以后会将curl和libevent的使用和学习. 一.开源库常用安装步骤 1.开 ...
- 接口自动化：HttpClient + TestNG + Java(五) - 接口测试数据驱动
在上一篇中,我们实现了post方法请求的封装和测试,这一篇我们做测试数据的分离. 5.1 测试数据处理思路 5.1.1 测试数据分离 这里我想到,我们之前的测试demo里,全都是在testNG类里去写 ...
- 【面试】我是如何在面试别人Spring事务时“套路”对方的
“中国最好面试官” 自从上次写了一篇“[面试]我是如何面试别人List相关知识的,深度有点长文”的文章后,有读者专门加我微信,说我是“中国最好面试官”,这个我可受不起呀. 我只是希望把面试当作是一次交 ...
- 4.1ASP.NET Core请求过程「深入浅出ASP.NET Core系列」
希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. HTTP请求过程 这里展示整体的HTTP请求的过程,这里化繁为简,保留了主干流程: 从浏览器输入域名开始,这里忽略 ...
- 【Vuex】vuex基本介绍与使用
Vuex是什么? 官方解释: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集 ...
- CAD.NET二次开发 新建图层 删除图层 指定图层颜色以及线形等
基于浩辰CAD 2019测试 功能实现 直接上代码: [CommandMethod("CreateAndAssignAlayer")] //新建图层 然后添加到图层表里 publi ...
- MySQL 笔记整理（19） --为什么我只查一行的语句，也执行这么慢？
笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 19) --为什么我只查一行的语句,也执行这么慢? 需要说明一下,如果M ...
- 现代Java进阶之路必备技能——2019 版
Java技术的学习阶段有三 第1个是java基础,比如对集合类,并发,IO,JVM,内存模型,泛型,异常,反射,等有深入了解. 第2个是全面的互联网技术相关知识,比如redis,mogodb,ngin ...
- maven的安装和环境配置
一.下载maven Apache Maven下载地址:http://maven.apache.org/download.cgi 二.maven的安装 将下载好的安装文件解压到d盘根目录下即可(当然,这 ...
- 为什么 User 应该翻译为 「使用权人」 ？
User, 旧译「用户」,我在此向大家倡议有条件地选择翻译为「使用权人」. 1. __使用权人__更能反应 User 的本质特征 我们看到一匹马的时候不会说这是一头猪,而 User 的本质是什么?在我 ...