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的混写. 注意 ...
随机推荐
- SQL Sever——妙用种子列
/****** Script for SelectTopNRows command from SSMS ******/ SELECT TOP 1000 [OFFRCD_STATUS_ID] ,[OFF ...
- #006 dependencies和devDependencies的区别
dependencies 和 devDependencies 区别 在 npm 中的 package.json ,有两种插件的依赖包配置形式。 dependencies 和 devDependenci ...
- 团队作业1——团队展示&教辅宝
1.队名:PHILOSOPHER 2.队员学号: [组长]金盛昌(201421122043).刘文钊(20142112255).陈笑林(201421122042). 张俊逸(201421122044) ...
- 遇见C++ Lambda
转自:https://www.cnblogs.com/allenlooplee/archive/2012/07/03/2574119.html 遇见C++ Lambda Written by Alle ...
- 工作中碰到的一个问题(cookie相关)
今天上线了一个API,6台机器做的集群.API的第一步是读取cookie,判断用户是否登录. 例如,线上服务器分别是 10.255.242.1 10.255.242.2 10.255.242.3 10 ...
- 自定义input[type="checkbox"]的样式
对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...
- Oracle-本地连接没问题,远程连接有问题解决方式
1. 问题 我的环境是oracle11gr2,本地用plsql还是toad连接都没有不论什么问题,而用别的机器远程连接就提示 无监听程序等错误. 2. 原因 oracle安装路径 --- 比如: F ...
- hdu2102
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u014303647/article/details/27705195 题目链接: pid=2102& ...
- Golang 读取写入Etcd
http://www.yunweipai.com/archives/8131.html 新一代etcd:etcd3 etcd是一个高可用的 Key/Value 存储系统,主要用于分享配置和服务发现.简 ...
- 1191. [HNOI2006]超级英雄【二分图】
Description 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的 多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目,只有当选手正确 ...