一、JSX语法的基本使用

JSX语法的基本使用

一、什么是JSX？
JSX是React的核心组成部分，是一种JavaScript语法扩展，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法。
eg. 我们直接用html输出一个helloworld，代码是直接写在body里面：

<body><div>helloworld</div>
</body>

但 jsx 是把 html 代码写在 js 里面, 然后再通过React内的render渲染到页面上

<body><div class="app"></div><script>var element = <h1>helloworld</h1>ReactDOM.render(element,document.querySelector(".app"))</script>
</body>

二、JSX的本质
当我们编写 JSX 代码时，JSX为我们提供了创建React元素方法 React.createElement(component， props， …children)，即 JSX 本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象。

var element1 = <div>helloworld</div>var element2 = (<div className="title" style={{ color: "red" }}>hello world!<span>nihao</span><span>react</span></div>)

等价于以下代码：

var element1 = React.createElement("div", null, "helloworld")var element2 = React.createElement("div", {className: "title",style: {color: "red"}}, "hello world!", React.createElement("span", null, "nihao"), React.createElement("span", null, "react"));

三、JSX表达式的基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 02-创建容器 --><div class="app"></div><!-- 01-引入库 --><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><!-- 03-babel 解析jsx --><script type="text/babel">// 04-创建元素 var element = <h1>helloworld</h1>// 05-把元素渲染到真实的DOM容器里ReactDOM.render(element,document.querySelector(".app"))</script>
</body>
</html>

四、JSX的在函数中的使用

1.jsx表达式里面调用普通函数

function getName(users){return users.lastName + users.firstName;
}
var user = {firstName:"三",lastName:"张"
}
var element = <h1>{getName(user)}</h1> // 张三

2.函数里面调用jsx表达式

function getName(users){return users.lastName + users.firstName;
}
function greet(users){if(users){return <h1>hello {getName(users)}</h1>}else{return <h1>hello Stanger</h1>}
}
var user = {firstName:"三",lastName:"张"
}
var element = greet(user) // hello 张三
var element = greet()  // hello Stanger

五、JSX中的属性绑定
1.可以使用引号将字符串字面量指定为属性值( 注意： React DOM结点使用骆驼法给属性命名， className (class) , htmlFor (for) )

var element1 = <h1 className="first">hello Stanger</h1>
var element2 = (<form action=""><label htmlFor="name">名字：</label><input type="text" id="name"/></form>)

2.可以将一个JavaScript表达式嵌在一个大括号中作为属性值

var user = {firstName:"三",lastName:"张",avartur:"图片url"}
var element = <img src={user.avartur} />

六、JSX样式绑定

let style = {width:100,height:100}
var element = <img style={style} src={user.avartur} />

七、JSX的子元素

1.首先JSX可以是一个不包含子元素的单个标签。

var element = <div>helloworld</div>

2.含多个子元素时，子元素必须被包裹在一个闭合标签内，否则会报错

// 含多个子元素时，子元素必须被包裹在一个闭合标签内
var element =（<div><h1>aaa</h1><h1>bbb</h1></div>
）

八、在JSX中使用for循环

var names = ['zs','ls','ww'];
var elements = []
for(var i=0;i<names.length;i++){elements.push(<li>{names[i]}</li>)
}
var element = <ul>{elements}</ul>

输出：

九、XSS 对 ReactDOM 进行转译中的问题

var stringTag1 = <strong>strong man</strong>var stringTag2 = '<strong>strong man</strong>'
// &lt;strong&gt; strong man &lt;strong&gt;var element = <div>{stringTag1}</div> // 输出：strong man
var element = <div>{stringTag2}</div> // 输出：<strong>strong man</strong>// 解决：可以特殊处理，dangerouslySetInnerHTML属性 对不输出的html标签进行转译处理
var element = <div dangerouslySetInnerHTML={{__html:stringTag2}}></div>
// 输出：strong man

一、JSX语法的基本使用相关推荐

React学习（1）——JSX语法与React组件
为什么80%的码农都做不了架构师?>>> 本文记录了在官网学习如何使用JSX+ES6开发React的过程. 全文共分为3篇内容: JSX语法与React组件状态.事件与动态渲 ...
写jsx_一种让小程序支持JSX语法的新思路
React社区一直在探寻使用React语法开发小程序的方式,其中比较著名的项目有Taro,nanachi.而使用React语法开发小程序的难点主要就是在JSX语法上,JSX本质上是JS,相比于小程序静 ...
reactjs jsx语法规则
jsx语法规则: 1.定义虚拟DOM时,不要写引号. 2.标签中混入JS表达式时要用{}. 3.样式的类名指定不要用class,要用className. 4.内联样式,要用style={{key:va ...
22-React JSX语法
React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...
ReactJS入门之JSX语法
JSX语法 JSX语法就是,可以在js文件中插入html片段,是React自创的一种语法. JSX语法会被Babel等转码工具进行转码,得到正常的js代码再执行. 使用JSX语法,需要2点注意: 1. ...
jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
react 注释html,React之JSX语法
React发明了JSX,利用HTML语法来创建虚拟DOM.React的核心机制之一就是可以在内存中创建虚拟的DOM元素.以此来减少对实际DOM的操作从而提升性能. JSX 即Javascript XM ...
jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程，什么是JSX？在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
React学习笔记一 JSX语法组件
JSX语法 1.标签不能添加引号,换行用括号包裹,并且只有一个根标签 const H1 = <h1>标题</h1> const Div = (<div><h1 ...

一、JSX语法的基本使用

JSX语法的基本使用

一、JSX语法的基本使用相关推荐

最新文章

热门文章