ReactJs 第二章 JSX

        JSX是书写在jsx文件中的看似JavaScript语法但又包含Html标签的一种新的写法。jsx为Javascript的一种扩展语法,tsx则为TypeScript 的扩展语言。其书写看起来有JS也有Xml标签。JSX是ReactApp组成的最小单元元素，React使用Bable编译器将Jsx转换为js对象，提供给React进行页面渲染。

 1，JSX之{大括号}表达式在标签内的使用

          在JSX中可以使用大括号来进行嵌入需要替换的部分，可以替换之前定义的变量、函数表达式等表达式,如:

import React from 'react';
import ReactDOM from 'react-dom';

const name = "zhang san";
const person ={
		name:"li si",
		age:18
}
var newPersonName = function(){
	return "wang wu";
}

const element = <h1>Hello {name} , {person.name} And {newPersonName()}</h1>;

ReactDOM.render(element,document.getElementById('root'));

  运行结果

在ReactDOM.render函数中第一部分中的jsx也可以使用函数进行jsx对象返回。

var getJsxObj = function(){
	return <h3>这是JSXObj</h3>;
}

ReactDOM.render(getJsxObj(),document.getElementById('root'));

 2，JSX之{大括号}表达式在标签上以属性的方式使用

const element = <img src={url} title={"这是标题"}></img>;

在写style时 style值需要用js对象来解析，所以在有style属性时写法如下：

const divEle = <div style={{border:"2px solid red"}}>{element}</div>;

3，使用大括号还可以进行对危险标签进行转义操作

const script = "<script>alert(999);</script>";

ReactDOM.render(script,document.getElementById('root'));

4,JSX多层级嵌套

import React from 'react';
import ReactDOM from 'react-dom';


const url = "https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png";

const element = <img src={url} title={"这是标题"}></img>;
const divEle = <div style={{border:"2px solid red"}}>{element}</div>;

ReactDOM.render(divEle,document.getElementById('root'));

5，Bable 转义过程：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
//等效转义后的：
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
//简化后的结构：
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};