一.将表达式嵌套在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的更多相关文章

  1. React(JSX语法)-----JSX基本语法

    JSX------HTML tags vs React Components: 1.To render a html tag,just use lower-case tag names in JSX; ...

  2. 【go】脑补框架 Express beego tornado Flux reFlux React jsx jpg-ios出品

    http://goexpresstravel.com/ 今天 Express 的作者 TJ Holowaychuk 发了一篇文章,正式宣告和 Node.js 拜拜了,转向 Go 语言. Go vers ...

  3. 在react jsx中,为什么使用箭头函数和bind容易出现问题

    在之前的文章中,已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做. 现在 ...

  4. 在react jsx中使用if判断

    在react jsx中如果使用if判断,需要这样做 var loginButton; if (loggedIn) { loginButton = <LogoutButton />; } e ...

  5. Airbnb React/JSX 编码规范

    Airbnb React/JSX 编码规范 算是最合理的React/JSX编码规范之一了 内容目录 基本规范 Class vs React.createClass vs stateless 命名 声明 ...

  6. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  7. React JSX语法说明

    原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...

  8. [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 ...

  9. 2. React JSX语法及特点介绍

    什么是JSX         JSX 是一种类 XML 语言,全称是 JavaScript XML .React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高.语义更清晰.对 Re ...

  10. React JSX基本语法规则

    JSX基本语法规则: 遇到HTML(以 < 开头)标签,就用HTML规则解析: 遇到代码块(以 { 开头),就用JavaScript规则解析. 它允许HTML和JavaScript的混写. 注意 ...

随机推荐

  1. Centos下防止ssh暴力破解密码

    参考文章地址:https://yq.aliyun.com/ziliao/48446 https://www.cnblogs.com/lsdb/p/7095288.html 1.收集 /var/log/ ...

  2. EBS中比较复杂的trace方法

    FND LOG Messages-------------------------a) Using the System Administrator Responsibility, navigate  ...

  3. September 27th 2017 Week 39th Wednesday

    We both look up at the same stars, yet we see such different things. 我们仰望同一片星空,却看见了不同的事物. Looking up ...

  4. Scala编写的打印乘法口诀和金字塔

       刚开始接触scala,觉得语法简单,一时兴起就写了两个简单的例子 public class Calculate { public static void test1(){ for(int i=1 ...

  5. 打开文件 和 字符串中%s 的大坑

    ai`....

  6. ijcai statistics

  7. python第五课——流程控制语句

    流程控制语句: 分类: 1).顺序结构 2).判断结构解析:如果...否则... 3).循环结构 1.判断结构: 格式分类:三种格式 格式一: ① if 条件表达式: 语句块 ② 执行流程: 计算机会 ...

  8. 微软YY公开课[《微软中国云计算Azure平台体验与新企业架构设计》 周六晚9点

    YY频道是 52545291//@_勤_: YY账号真的是一次一账号啊! 全然记不得之前注冊的//@老徐FrankXuLei: 最火爆的微软免费公开课.第一次顶峰126人.第二次96人.第三次我们又来 ...

  9. Redis与高级语言内置的数据结构相比的异同及优势

    相关链接: 为什么要用redis而不用map做缓存? Redis的数据结构及应用场景 Redis缓存和直接使用内存的比较 Java自带的数据结构(如HashMap,BitSet等)做缓存和NoSQL( ...

  10. CentOS部署Kubernetes1.13集群-1(使用kubeadm安装K8S)

    参考:https://www.kubernetes.org.cn/4956.html 1.准备 说明:准备工作需要在集群所有的主机上执行 1.1系统配置 在安装之前,需要先做如下准备.三台CentOS ...