一.将表达式嵌套在JSX中

要在JSX中内嵌js表达式只需要将js表达式放在{}中，例如：

const element = 
this is a JSX {sayName()}
function sayName(){};

二.JSX也是表达式

在编译之后Jsx会成为一个常规的js对象。所以可以在if，for语句中使用Jsx，例如

function getName(firstname,lastname,all=false){if(all){return 
{firstname} {lastname} 
}}

注：使用jsx时，标签之间的内容会被当作字符串（{}中的会被当作js语句），如

{name1} + ' ' + {name2}
const name1 = 'li';const name2 = 'hua';会被渲染为li+' '+hua

 

 三.使用JSX给元素添加属性

 

// 第一种方式const element = 
this is page
// 第二种方式 const element = 
this is page,too
 const title = 'page';// 注：JSX中的元素的属性使用驼峰命名法（class对应className）

四.JSX标签也能够包含子标签

const element = (        
     
            
      
I am a header
            
      
 I am a page
        
     
 );

 五.深入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 hi    }}
     

 4.自定义的组件必须以大写开头。如果一个元素以小写字母开头，那么react会认为它是一个内置的组件(如:div,p等)，这种情况React.createElement的第一个参数是字符串

5.不能使用一个表达式作为React 元素类型。但是可以先将这个表达式的值保存到一个以大写字母开头的变量中

 

const typesElement = {    One:function One(props) {        return 
one
    },    Two:function Two(props) {        return 
two
    }};function MyButton(props) {    const Com = typesElement[props.type];    return 
     }function Jsx(props) {    return 
     }

 

 6.在jsx中有多种指定props的方式,如下：

1).js表达式：
    
      2).纯字符串: 
      3).如果没有给prop赋值，那么这个prop默认为true:
      4).扩展运算符
    

const props = {first:'one','second':'two'}
      等价于 
     

 7.jsx表达式中开标签核闭标签之间的内容将作为一个特殊的prop——props.children开标签与闭标签之间可以是字符串，其他组件，js表达式或者函数(props.children

和其他的props一样可以传递任何类型的数据)。当props.children为布尔值，null,undefined时，props.children会被忽略

    
 == 
    
     {true}
    
 == 
    
     {false}
    
 == 
    
     {null}
    
 == 
    
     {undefined时}
    
,这种特性对条件渲染是很有用的，如下 
    
          {show && 
     
}     
      
     当show为true时,
    
才会被显示

如果想让null,false,true,undefined被输出，先要把它们转换为字符串

<myButton>I am is {show.toString()}</myButton>