React - jsx
目录
1 1. 什么是JSX语法2 2. jsx语法示例与渲染的VNode节点3 3. jsx的渲染流程4 4. jsx中的js和html的写法不同5 a. js：{ js语法 }6 i. 花括号里边一定要返回字符串才能渲染7 ii. {{ 双花括号表示js语法里的对象格式 }}8 iii. 花括号里可以写表达式、三元、有返回值且返回字符串的函数调用9 iv. 花括号里直接放对象报错
10 v. 数组可以直接被渲染到页面中。
11 b. html：
12 i. class等关键字不能用做html的属性(如class、for等不行，需要替换成别的)
13 1) class -> className
14 2) for -> htmlFor
15 c. a标签写了以后，必须写href属性
16 d. 组件根节点只能是一个标签，不能有并列标签。否则报错！
17 三种方法实现空白标签包裹：(就像小程序的block标签、又像vue的template标签)
18 i. 空白标签1
19 ii. import { Fragment } from 'react'；空白标签1
20 iii. <>空白标签2
21 e. 列表渲染 - 迭代的方法(没有for)：利用数组进行渲染
22 f. key值唯一的绑定
23 g. 条件切换的使用(没有if else、简直反人类)
24 h. 动态样式的绑定 - style的值需要是一个js语法，包裹在对象里边。
25 i. v-html类似用法：dangerouslySetInnerHTML={ {__html: variableName} }【innerHTML容易造成xss攻击，避免使用】
26 j. jsx中的注释
27 i. 多行注释：{ /** js注释 **/ }
28 ii. 单行注释：
29 {
30 // 单行注释，花括号如果提上来就被注释了。所以换行
31 }
什么是JSX？
JSX就是在js中写html代码。写在js里边的html标签就是JSJSX语法，JS+HTML或JS+XML的组合。需要react来解析。就必须引入React组件。
JSX语法：
JSX语法就是React.createElement函数的语法糖。
JSX会利用babel进行转化，转化成React.createElement函数。
JSX语法有一个返回值，返回一个虚拟的节点VNode对象，该对象用来描述当前编译的元素。
JSX语法示例：
let App =
此生无悔入华夏，来世还生中华家！
祖国母亲生日快乐！
对应生成的React.createElement函数
let App = React.createElement('div', {
id: 'gjf',
className: 'xing_org1^'
}, React.createElement('h3', {
className: 'love_china'
}, '此生无悔入华夏，来世还生中华家！'), '祖国母亲生日快乐！')
对应生成的VNode节点对象：
渲染流程
JSX
-> React.createElement(type,props,chidrens...)
-> vNode对象(描述当前元素)
-> 渲染到页面上
JSX组件根节点只能是一个标签
不能有并列标签，否则报错如下：
解决方案有三种：
React.Fragment标签
解构上边那个标签：{ Fragment }：
空白标签<>：
style动态样式的绑定
改成下边这样：
另一个示例：
试试JSX里的js语法，花括号里都可以写啥
报错如下：
The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
in h3 (at baiduSearch.js:41) in div (at baiduSearch.js:40) in App (at src/index.js:6)
期待一个map对象，而不是一个字符串。
修改如下：
试试JSX里的js语法，花括号里都可以写啥
JSX的花括号里可以写：
可以写：表达式、三元表达式、字符串、函数调用(必须有返回值)
试试JSX里的js语法，花括号里都可以写啥
字符串：{ '一个字符串' }
表达式：{ 1 + 1 }
三元表达式：{ true ? '加油郭菊锋！' : '加油小石头！' }
函数调用：{ test() }
函数调用 - 也可以返回表达式 - { test1() }
函数调用 - 没有返回值时：{ test2()}
function test(){
return "必须返回的是字符串？"
}
function test1(){
return 2 + 2
}
function test2(){
var mySelf = "我没有返回值";
// return 2 + 2
}
如果里边放一个对象直接渲染，就会报错：
非要渲染一个对象：{{a: 1}}
对象作为react的子元素是不合法的。如果您打算呈现一组子元素，那么可以使用数组。
解决方法：把对象用JSON.stringify()格式化。
数组可以直接被渲染到页面中。
可以渲染数组：{ [1,2,数组里的标签] }
或者：
html语法
class等关键字不能用做html的属性。否则报错：
搜索热点 换一换
报的警告，虽然没啥问题，但就是看着不爽
列表渲染 - 迭代的方法(没有for)
小程序的wx:for，vue的v-for， react里边就没有for的api接口。
react的特点就是API比较少。可以利用数组进行渲染。
数组可以直接渲染到js的大括号中，数组的各项还能添加标签。所以数组就可以用来批量渲染列表：
在js的花括号里，既要遍历数组，又要有返回值。所以用到数组的map方法
核心思想如上，列表渲染应用的代码如下：
对于上边不知道怎么给li加不同的类名的问题，处理方式如下：
列表渲染时，需要设置唯一key，否则报错
key应该是唯一的，不要用map循环的i。否则之前只是挪动dom的位置，之后就会需要全部删了重新生成dom
源代码
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！