一.将表达式嵌套在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. C++ new和delete重载

    C++ new和delete重载 2012-02-15 23:25:33|  分类: C/C++|举报|字号 订阅           首先,new和delete是运算符,重载new和delete是可 ...

  2. RYU基础整理

    1. RYU结构,源码 1.1 RYU文件目录 下面介绍ryu/ryu目录下的主要目录内容. base base中有一个非常重要的文件:app_manager.py,其作用是RYU应用的管理中心.用于 ...

  3. 扯不清楚的virtual和abstract

    定义Person类: class Person { public void Say() { Console.WriteLine("I am a person"); } } 现在,我 ...

  4. [JSOI2008]火星人

    嘟嘟嘟 嗯. splay维护哈希. 如题,用splay维护哈希,查找的时候二分.所以复杂度是取决于询问复杂度:\(O(n \log^ 2{n})\). 这道题还有一个技巧,就是一个节点记录的是他的子树 ...

  5. [USACO08JAN]Running

    嘟嘟嘟 这很显然是一道dp题. 令dp[i][j]表示第 i 分钟末,疲劳度为 j 是的最大跑步距离,则 dp[i][0] = max(dp[i - 1][0], max(dp[i - j][j])) ...

  6. Apache去掉index.php

    把 #LoadModule rewrite_module modules/mod_rewrite.so 前面的#去掉, 再把权限AllowOverride None都改为AllowOverride A ...

  7. bootstrap 多级下拉菜单

    如上效果: 实现代码: 导入js和css: <link rel="stylesheet" href="http://cdn.static.runoob.com/li ...

  8. webStorm常用设置之过滤文件夹

    webStorm是一款很好用的前端IDE,但是不能否认的是webStorm很重,没有sublime轻便 尤其是项目cnpm后,加载node_modules时的状态,简直想那块豆腐自杀有莫有,就算你耐心 ...

  9. (转)Fiddler菜单栏详解

    原文作者:子信风蓝蓝 传送门:http://www.cnblogs.com/chengchengla1990/p/5681775.html Statistics 页签 完整页签如下图: Statist ...

  10. BurpSuite+SQLmap的一种另类扫描

    过年之后就忙的团团转.三月开始可以轻松一些,抽空写写最近瞎折腾的东西,本文只是描述工具的一种使用方法,无技术含量.(PS:这种做法,网上也有很多教程,本文只为记录). 由于公司使用的电脑都是win10 ...