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的混写. 注意 ...
随机推荐
- C++ new和delete重载
C++ new和delete重载 2012-02-15 23:25:33| 分类: C/C++|举报|字号 订阅 首先,new和delete是运算符,重载new和delete是可 ...
- RYU基础整理
1. RYU结构,源码 1.1 RYU文件目录 下面介绍ryu/ryu目录下的主要目录内容. base base中有一个非常重要的文件:app_manager.py,其作用是RYU应用的管理中心.用于 ...
- 扯不清楚的virtual和abstract
定义Person类: class Person { public void Say() { Console.WriteLine("I am a person"); } } 现在,我 ...
- [JSOI2008]火星人
嘟嘟嘟 嗯. splay维护哈希. 如题,用splay维护哈希,查找的时候二分.所以复杂度是取决于询问复杂度:\(O(n \log^ 2{n})\). 这道题还有一个技巧,就是一个节点记录的是他的子树 ...
- [USACO08JAN]Running
嘟嘟嘟 这很显然是一道dp题. 令dp[i][j]表示第 i 分钟末,疲劳度为 j 是的最大跑步距离,则 dp[i][0] = max(dp[i - 1][0], max(dp[i - j][j])) ...
- Apache去掉index.php
把 #LoadModule rewrite_module modules/mod_rewrite.so 前面的#去掉, 再把权限AllowOverride None都改为AllowOverride A ...
- bootstrap 多级下拉菜单
如上效果: 实现代码: 导入js和css: <link rel="stylesheet" href="http://cdn.static.runoob.com/li ...
- webStorm常用设置之过滤文件夹
webStorm是一款很好用的前端IDE,但是不能否认的是webStorm很重,没有sublime轻便 尤其是项目cnpm后,加载node_modules时的状态,简直想那块豆腐自杀有莫有,就算你耐心 ...
- (转)Fiddler菜单栏详解
原文作者:子信风蓝蓝 传送门:http://www.cnblogs.com/chengchengla1990/p/5681775.html Statistics 页签 完整页签如下图: Statist ...
- BurpSuite+SQLmap的一种另类扫描
过年之后就忙的团团转.三月开始可以轻松一些,抽空写写最近瞎折腾的东西,本文只是描述工具的一种使用方法,无技术含量.(PS:这种做法,网上也有很多教程,本文只为记录). 由于公司使用的电脑都是win10 ...