广东网站建设找,腾讯网站站内面包屑导航,做简历的什么客网站,泰安房产网签最新消息一.JSX基础-概念和本质
1.1 什么是JSX
JSX是JavaScript和XML#xff08;HTML#xff09;的缩写#xff0c;表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式
优势#xff1a; 1. HTML的声明式模版写法 2. JS的可编程能力
JSX的本质#xff1a; JSX并不是标…一.JSX基础-概念和本质
1.1 什么是JSX
JSX是JavaScript和XMLHTML的缩写表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式
优势 1. HTML的声明式模版写法 2. JS的可编程能力
JSX的本质 JSX并不是标准的JS语法它是JS的语法扩展浏览器本身不能识别需要通过解析工具做解析之后才能在浏览器中运行
1.2 JSX中使用JS表达式
在JSX中可以通过 大括号语法{} 识别 JavaScript中的表达式比如常见的变量、函数调用、方法调用等等 使用引号传递字符串使用JavaScript变量函数调用和方法调用使用JavaScript对象 const count 100function getName () {return jack}function App () {return (div classNameAppthis is App{/* 使用引号传递字符串 */}{this is message}{/* 识别js变量 */}{count}{/* 函数调用 */}{getName()}{/* 方法调用 */}{new Date().getDate()}{/* 使用js对象 */}div style{{ color: red }}this is div/div/div)}export default App1.3 JSX中实现条件渲染
在React中可以通过**逻辑与运算符、三元表达式?:**实现基础的条件渲染
const isLogin true
function App () {return (div classNameApp{/* 逻辑与 */}{isLogin spanthis is span/span}{/* 三元运算 */}{isLogin ? spanjack/span : spanloading.../span}/div)
}
export default AppJSX中实现复杂条件渲染
// 定义文章类型
const articleType 3 // 0 1 3
// 定义核心函数根据文章类型返回不同的JSX模版
function getArticleTem () {if (articleType 0) {return div我是无图文章/div} else if (articleType 1) {return div我是单图模式/div} else {return div我是三图模式/div}
}
function App () {return (div classNameApp{/* 调用函数渲染不同的模版 */}{getArticleTem()}/div)
}
export default App二.React中的事件绑定
1.基础事件绑定 语法on 事件名称 { 事件处理程序 }整体上遵循驼峰命名法 2.使用事件对象参数 语法在事件回调函数中设置形参e 3.传递自定义参数 语法事件绑定的位置改造成箭头函数的写法在执行clickHandler实际处理业务函数的时候传递实参 4.同时传递事件对象和自定义参数 在事件绑定的位置传递事件实参e和自定义参数clickHandler中声明形参注意顺序对应
function App () {// 基础绑定// const handleClick () {// console.log(button被点击了)// }// 事件参数e// const handleClick (e) {// console.log(button被点击了, e)// }// 传递自定义参数// const handleClick (name) {// console.log(button被点击了, name)// }// 既要传递自定义参数 而且还要事件对象econst handleClick (name, e) {console.log(button被点击了, name, e)}return (div classNameAppbutton onClick{(e) handleClick(jack, e)}click me /button/div)
}三.classnames优化类名控制
classnames是一个简单的JS库可以非常方便的通过条件动态控制class类名的显示
