一.将表达式嵌套在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. SQL Sever——妙用种子列

    /****** Script for SelectTopNRows command from SSMS ******/ SELECT TOP 1000 [OFFRCD_STATUS_ID] ,[OFF ...

  2. #006 dependencies和devDependencies的区别

    dependencies 和 devDependencies 区别 在 npm 中的 package.json ,有两种插件的依赖包配置形式。 dependencies 和 devDependenci ...

  3. 团队作业1——团队展示&教辅宝

    1.队名:PHILOSOPHER 2.队员学号: [组长]金盛昌(201421122043).刘文钊(20142112255).陈笑林(201421122042). 张俊逸(201421122044) ...

  4. 遇见C++ Lambda

    转自:https://www.cnblogs.com/allenlooplee/archive/2012/07/03/2574119.html 遇见C++ Lambda Written by Alle ...

  5. 工作中碰到的一个问题(cookie相关)

    今天上线了一个API,6台机器做的集群.API的第一步是读取cookie,判断用户是否登录. 例如,线上服务器分别是 10.255.242.1 10.255.242.2 10.255.242.3 10 ...

  6. 自定义input[type="checkbox"]的样式

    对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...

  7. Oracle-本地连接没问题,远程连接有问题解决方式

    1. 问题 我的环境是oracle11gr2,本地用plsql还是toad连接都没有不论什么问题,而用别的机器远程连接就提示 无监听程序等错误. 2. 原因 oracle安装路径  --- 比如: F ...

  8. hdu2102

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u014303647/article/details/27705195 题目链接: pid=2102& ...

  9. Golang 读取写入Etcd

    http://www.yunweipai.com/archives/8131.html 新一代etcd:etcd3 etcd是一个高可用的 Key/Value 存储系统,主要用于分享配置和服务发现.简 ...

  10. 1191. [HNOI2006]超级英雄【二分图】

    Description 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的 多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目,只有当选手正确 ...