一.将表达式嵌套在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. jiekou

    接口 新的接口 package cn.eangaie.jingdong.controller;   import cn.eangaie.jingdong.entity.Result; import c ...

  2. ASP.NET在IIS的启动优化设置

    ASP.NET在IIS的启动优化设置 约定: IIS=Internet Information Services Manager 概要 因为ASP.NET 程序在第一次启动的时候需要等待太长时间,至少 ...

  3. November 16th 2016 Week 47th Wednesday

    Success is falling nine times and getting up ten. 成功就是哪怕跌倒九次,也要在第十次爬起来. For most of us, we may choos ...

  4. ZT 二叉树先序,中序,后序遍历非递归实现

    二叉树先序,中序,后序遍历非递归实现 分类: 数据结构及算法2012-04-28 14:30 8572人阅读 评论(6) 收藏 举报 structc 利用栈实现二叉树的先序,中序,后序遍历的非递归操作 ...

  5. print(dir(...)) 打印对象或者类中的方法和函数

  6. spring中MessageSource的配置使用方法2--ReloadableResourceBundleMessageSource【转】

    本文转载仅供自己学习收录,不做任何商业用途,如有需要可访问原地址:http://blog.csdn.net/qyf_5445/article/details/8124362 如何在spring mvc ...

  7. regex_replace

    Regex_iterator方法需要输入一个正则表达式,以及一个用于替换匹配的字符串的格式化字符串:这个格式化的字符串可以通过表的转义序列引用匹配子字符串的部分内容: 转义序列 $n 替换第n个捕获的 ...

  8. 通过应用程序域AppDomain加载和卸载程序集

    微软装配车的大门似乎只为货物装载敞开大门,却将卸载工人拒之门外.车门的钥匙只有一把,若要获得还需要你费一些心思.我在学习Remoting的时候,就遇到一个扰人的问题,就是Remoting为远程对象仅提 ...

  9. 【转】iOS消息推送实现过程记录

    客户端代码:链接地址 服务器代码:链接地址  链接地址 这里记录下iOS消息推送实现的全过程 首先,申请秘钥. 之后进入链接地址开发者,当然你得有啊!!!!! 点击这里 如图: 下面实现创建推送证书( ...

  10. (未解决)记录一次登录&jmeter,留下的一地鸡毛

    一般的登录校验过程是这样的:客户端发起请求,拿到服务器给的“令牌”,再次发起请求,服务器验证“令牌”是否正确,从而返回给客户端是登录成功还是登录失败.然后我按照这个流程,用jmeter去模拟了登录过程 ...