React——JSX
一.将表达式嵌套在JSX中
要在JSX中内嵌js表达式只需要将js表达式放在{}中,例如:
const element = <h1>this is a JSX {sayName()}</h1>
function sayName(){};
二.JSX也是表达式
在编译之后Jsx会成为一个常规的js对象。所以可以在if,for语句中使用Jsx,例如
function getName(firstname,lastname,all=false){
if(all){
return <p>{firstname} {lastname} </p>
}
}
注:使用jsx时,标签之间的内容会被当作字符串({}中的会被当作js语句),如
<p>{name1} + ' ' + {name2}</p>
const name1 = 'li';
const name2 = 'hua';
会被渲染为li+' '+hua
三.使用JSX给元素添加属性
// 第一种方式
const element = <p title="page">this is page</p>
// 第二种方式
const element = <p title={title}>this is page,too</p>
const title = 'page';
// 注:JSX中的元素的属性使用驼峰命名法(class对应className)
四.JSX标签也能够包含子标签
const element = (
<div>
<h1>I am a header</h1>
<p> I am a page</p>
</div>
);
五.深入JSX
1.jsx只是React.createElement(element,props,children)的语法糖;
<MyButton color='red' num={2}>Click me</MyButton>
会被编译成
React.createElement(MyButton,{
color:'red',
num:2
},'Click me');
自闭和元素:<div color='red'/>,会被编译成
React.createElement('div',{
color:'red'
},null)
2.jsx的第一部分决定了react组件的类型。大写的类型表明jsx标签指的是一个react组件。这些标签被编译到直接引用的命名变量中,所以如果使用jsx<MyButton/>表达式,
MyButton必须在作用域内,因为编译jsx要使用React.createElement,所以React也必须在作用域范围内
3.React组件可以是一个对象的属性,如下:
const allComponents = {
MyButton:function(props){
return <button>hi</button>
}
}
<allComponents.MyButton/>
4.自定义的组件必须以大写开头。如果一个元素以小写字母开头,那么react会认为它是一个内置的组件(如:div,p等),这种情况React.createElement的第一个参数是字符串
5.不能使用一个表达式作为React 元素类型。但是可以先将这个表达式的值保存到一个以大写字母开头的变量中
const typesElement = {
One:function One(props) {
return <p>one</p>
},
Two:function Two(props) {
return <p>two</p>
}
};
function MyButton(props) {
const Com = typesElement[props.type];
return <Com/>
}
function Jsx(props) {
return <MyButton type='One'/>
}
6.在jsx中有多种指定props的方式,如下:
1).js表达式:<MyButton num={1+2+3}/>
2).纯字符串: <MyButton string="hi"/>
3).如果没有给prop赋值,那么这个prop默认为true:<MyButton show/>
4).扩展运算符
const props = {first:'one','second':'two'}
<MyButton {...props}/> 等价于 <MyButton first='one' second='two'/>
7.jsx表达式中开标签核闭标签之间的内容将作为一个特殊的prop——props.children开标签与闭标签之间可以是字符串,其他组件,js表达式或者函数(props.children
和其他的props一样可以传递任何类型的数据)。当props.children为布尔值,null,undefined时,props.children会被忽略
<div/> == <div>{true}</div> == <div>{false}</div> == <div>{null}</div> == <div>{undefined时}</div>,这种特性对条件渲染是很有用的,如下
<myButton>
{show && <Header/>}
<Text/>
</MyButton>
当show为true时,<Header/>才会被显示
如果想让null,false,true,undefined被输出,先要把它们转换为字符串
<myButton>I am is {show.toString()}</myButton>
React——JSX的更多相关文章
- React(JSX语法)-----JSX基本语法
JSX------HTML tags vs React Components: 1.To render a html tag,just use lower-case tag names in JSX; ...
- 【go】脑补框架 Express beego tornado Flux reFlux React jsx jpg-ios出品
http://goexpresstravel.com/ 今天 Express 的作者 TJ Holowaychuk 发了一篇文章,正式宣告和 Node.js 拜拜了,转向 Go 语言. Go vers ...
- 在react jsx中,为什么使用箭头函数和bind容易出现问题
在之前的文章中,已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做. 现在 ...
- 在react jsx中使用if判断
在react jsx中如果使用if判断,需要这样做 var loginButton; if (loggedIn) { loginButton = <LogoutButton />; } e ...
- Airbnb React/JSX 编码规范
Airbnb React/JSX 编码规范 算是最合理的React/JSX编码规范之一了 内容目录 基本规范 Class vs React.createClass vs stateless 命名 声明 ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
- React JSX语法说明
原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...
- [React] Linting React JSX with ESLint (in ES6)
ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and othe ...
- 2. React JSX语法及特点介绍
什么是JSX JSX 是一种类 XML 语言,全称是 JavaScript XML .React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高.语义更清晰.对 Re ...
- React JSX基本语法规则
JSX基本语法规则: 遇到HTML(以 < 开头)标签,就用HTML规则解析: 遇到代码块(以 { 开头),就用JavaScript规则解析. 它允许HTML和JavaScript的混写. 注意 ...
随机推荐
- Centos下防止ssh暴力破解密码
参考文章地址:https://yq.aliyun.com/ziliao/48446 https://www.cnblogs.com/lsdb/p/7095288.html 1.收集 /var/log/ ...
- EBS中比较复杂的trace方法
FND LOG Messages-------------------------a) Using the System Administrator Responsibility, navigate ...
- September 27th 2017 Week 39th Wednesday
We both look up at the same stars, yet we see such different things. 我们仰望同一片星空,却看见了不同的事物. Looking up ...
- Scala编写的打印乘法口诀和金字塔
刚开始接触scala,觉得语法简单,一时兴起就写了两个简单的例子 public class Calculate { public static void test1(){ for(int i=1 ...
- 打开文件 和 字符串中%s 的大坑
ai`....
- ijcai statistics
- python第五课——流程控制语句
流程控制语句: 分类: 1).顺序结构 2).判断结构解析:如果...否则... 3).循环结构 1.判断结构: 格式分类:三种格式 格式一: ① if 条件表达式: 语句块 ② 执行流程: 计算机会 ...
- 微软YY公开课[《微软中国云计算Azure平台体验与新企业架构设计》 周六晚9点
YY频道是 52545291//@_勤_: YY账号真的是一次一账号啊! 全然记不得之前注冊的//@老徐FrankXuLei: 最火爆的微软免费公开课.第一次顶峰126人.第二次96人.第三次我们又来 ...
- Redis与高级语言内置的数据结构相比的异同及优势
相关链接: 为什么要用redis而不用map做缓存? Redis的数据结构及应用场景 Redis缓存和直接使用内存的比较 Java自带的数据结构(如HashMap,BitSet等)做缓存和NoSQL( ...
- CentOS部署Kubernetes1.13集群-1(使用kubeadm安装K8S)
参考:https://www.kubernetes.org.cn/4956.html 1.准备 说明:准备工作需要在集群所有的主机上执行 1.1系统配置 在安装之前,需要先做如下准备.三台CentOS ...