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非常相似. ...
随机推荐
- SpringMVC之Controller和参数绑定
在上一篇Spring+SpringMVC+Mybatis整合中说到了SSM的整合,并且在其中添加了一个简单的查询功能,目的只是将整个整合的流程进行一个梳理,下面在上一篇中工程的基础上再说一些关于Spr ...
- k8s应用机密信息与配置管理（九）--技术流ken
secret 应用启动过程中可能需要一些敏感信息,比如访问数据库的用户名密码或者秘钥.将这些信息直接保存在容器镜像中显然不妥,Kubernetes 提供的解决方案是 Secret. Secret 会以 ...
- myeclipse配置tomcat服务器
在进行j2EE开发时,需要进行服务器配置, 这里因为要进行servlet开发,也要配置服务器.这里以在myeclipse上配置tomcat服务器为例 这里只是做下记录,方便自己以后查看 1.打开mye ...
- Java笔记(day9~day10)
继承: 好处:1.提高代码复用性: 2.让类之间产生关系,给多态提供了前提: 父类.子类 Java中支持单继承,不直接支持多继承,但对C++的多继承进行了改良 单继承:一个子类只能有一个直接复类 ...
- Spring注入对象(3)
2019-03-08/10:45:04 演示:对Product对象,注入一个Category对象 1.创建pojo类 Product类中有对Category对象的setter getter packa ...
- 获取元素CSS样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HandlerThread原理分析
HandlerThread是一个内部拥有Handler和Looper的特殊Thread,可以方便地在子线程中处理消息. 简单使用 HandlerThread的使用比较简单. mHandlerThrea ...
- 如何快速清理 docker 资源
如果经常使用 docker,你会发现 docker 占用的资源膨胀很快,其中最明显也最容易被察觉的应该是对磁盘空间的占用.本文将介绍如何快速的清理 docker 占用的系统资源,具体点说就是删除那些无 ...
- vue 外部字体图标使用，无须绝对路径引入办法
通常外部字体图标都在使用 iconfont ,这种图标在网上搜到一大把都是由于路径问题显示不出来,或者是显示个方块. 最近的项目中也碰到这个坑爸的问题,总结一下解决办法: 和 webpack.conf ...
- go get获取gitlab私有仓库的代码
目录 目录 1.Gitlab的搭建 2.如何通过go get,获取Gitlab的代码 目录 1.Gitlab的搭建 在上一篇文章中,已经介绍了如何搭建Gitlab Https服务<Nginx ...