网站建设补贴是经信局的政策吗,萧山网络公司,广告接单有什么平台,大气企业网站一、JSX介绍
概念#xff1a;JSX是 JavaScript XML#xff08;HTML#xff09;的缩写#xff0c;表示在 JS 代码中书写 HTML 结构
作用#xff1a;在React中创建HTML结构#xff08;页面UI结构#xff09;
优势#xff1a;
采用类似于HTML的语法#xff0c;降低学…一、JSX介绍
概念JSX是 JavaScript XMLHTML的缩写表示在 JS 代码中书写 HTML 结构
作用在React中创建HTML结构页面UI结构
优势
采用类似于HTML的语法降低学习成本会HTML就会JSX充分利用JS自身的可编程能力创建HTML结构 JSX 并不是标准的 JS 语法是 JS 的语法扩展浏览器默认是不识别的脚手架中内置的 babel/plugin-transform-react-jsx 包用来解析该语法将声明式解析成命令式
二、JSX基础
1、JSX中使用js表达式
在JSX中使用表达式
//1识别常规变量
//2原生js方法调用
//3三元运算符 常用
const name joy booy;
const getAge(){return 17}
const FLAGtruefunction App() {return div classNameApp{name}{getAge()}{FLAG?666:888}/div;
}export default App 可以使用的表达式: 字符串、数组、布尔值null \ undefined \ object([ ] / { }) 12、abc.split( )、[a, b].join(-) fn() 都可以写在{ }中 if 语句 / switch-case 语句 / 变量声明语句这些叫做语句不是表达式不能出现在 {} 中 PSexport default App 用于从脚本文件中导出单个类、函数没有这句其他文件中就无法导入这个对象无效弃用 2、jsx列表渲染
页面的构建离不开重复的列表结构比如歌曲列表商品列表等vue中用的是v-forreact这边如何实现呢
使用数组的map方法
// 来个列表
//技术方案map重复渲染的是那个模板就return谁
//注意遍历列表时同样需要一个类型为number/string不可重复的key提高diff性能
//key仅仅在内部使用不会出现在真实的dom结构中
const songs [{ id: 1, name: 痴心绝对 },{ id: 2, name: 粉色海洋 },{ id: 3, name: 夏天 },
];function App() {return (div classNameAppul{songs.map((item) (li{item.name}/li//或map(song li key{song.id}{song.name}/li)))}/ul/div);
}export default App; 3、JSX条件渲染
满足一定条件才渲染根据是否满足条件生成HTML结构比如Loading效果
可以使用 三元运算符 或 逻辑与()运算符
//技术方案:三元表达式常用 逻辑运算
// 来个布尔值
const flag true
function App() {return (div classNameApp{/* 条件渲染字符串 */}{flag ? react真有趣 : vue真有趣}{/* 条件渲染标签/组件 */}{flag spanthis is span/span }/div)
}
export default App
4、JSX模板精简原则
原则模板中的逻辑尽量保持精简
复杂的多分支的逻辑 收敛为一个函数 通过一个专门的函数来写分支逻辑 模板中只负责调用
const getHtag (type) {if (type 1) {return h1this is h1/h1;}if (type 2) {return h2this is h2/h2;}if (type 3) {return h3this is h3/h3;}
};function App() {return (div classNameApp{getHtag(1)}{getHtag(2)}{getHtag(3)}/div);
}export default App; 5、JSX样式处理
行内样式--在元素身上绑定一个style属性即可
function App() {return ( div classNameAppspan style{{color:red,fontSize:30px}}this is nb span/span /div)
}
export default App;或者模板精简化
const style {color: blue,fontSize: 10px
};function App() {return ( div classNameAppspan style{style}this is nb span/span /div)
}
export default App;类名样式--在元素身上绑定一个className属性即可
新建个.cs文件用来给App.js使用 import ./app.css;
const style {color: blue,fontSize: 10px
}function App() {return (div classNameAppspan style{style}this is nb span/spanspan classNameactive测试类名样式/span/div)
}export default App 6、JSX动态类名控制
动态控制active类名满足条件才有
return (div classNameAppspan style{style}this is nb span/spanspan classNameactive测试类名样式/spanspan className{showTitle ? active: }动态控制/span/div) 7、注意事项
掌握JSX在实际应用时的注意事项
JSX必须有一个根节点如果没有根节点可以使用/幽灵节点替代所有标签必须形成闭合成对闭合或者自闭合都可以JSX中的语法更加贴近JS语法属性名采用驼峰命名法 class - className for - htmlForJSX支持多行换行如果需要换行需使用() 包裹防止bug出现 //父节点示例 幽灵节点/ 幽灵节点/ 消失 下一节做一个练习案例
