React-1-jsx基础-事件绑定-样式处理

一.JSX基础-概念和本质

1.1 什么是JSX

JSX是JavaScript和XML(HTML)的缩写,表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式

优势: 1. HTML的声明式模版写法 2. JS的可编程能力

JSX的本质:

JSX并不是标准的JS语法,它是JS的语法扩展,浏览器本身不能识别,需要通过解析工具做解析之后才能在浏览器中运行

1.2 JSX中使用JS表达式

在JSX中可以通过 大括号语法{} 识别 JavaScript中的表达式,比如常见的变量、函数调用、方法调用等等

  1. 使用引号传递字符串
  2. 使用JavaScript变量
  3. 函数调用和方法调用
  4. 使用JavaScript对象
javascript 复制代码
	const count = 100
	
	function getName () {
	  return 'jack'
	}
	
	function App () {
	  return (
	    <div className="App">
	      this is App
	      {/* 使用引号传递字符串 */}
	      {'this is message'}
	      {/* 识别js变量 */}
	      {count}
	      {/* 函数调用 */}
	      {getName()}
	      {/* 方法调用 */}
	      {new Date().getDate()}
	      {/* 使用js对象 */}
	      <div style={{ color: 'red' }}>this is div</div>
	    </div>
	  )
	}

	export default App
1.3 JSX中实现条件渲染

在React中,可以通过**逻辑与运算符&&、三元表达式(?:)**实现基础的条件渲染

javascript 复制代码
const isLogin = true
function App () {
  return (
    <div className="App">
      {/* 逻辑与 && */}
      {isLogin && <span>this is span</span>}
      {/* 三元运算 */}
      {isLogin ? <span>jack</span> : <span>loading...</span>}
    </div>
  )
}
export default App

JSX中实现复杂条件渲染

javascript 复制代码
// 定义文章类型
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 className="App">
      {/* 调用函数渲染不同的模版 */}
      {getArticleTem()}
    </div>
  )
}
export default App

二.React中的事件绑定

1.基础事件绑定

语法:on + 事件名称 = { 事件处理程序 },整体上遵循驼峰命名法

2.使用事件对象参数

语法:在事件回调函数中设置形参e

3.传递自定义参数

语法:事件绑定的位置改造成箭头函数 的写法,在执行clickHandler实际处理业务函数的时候传递实参

4.同时传递事件对象和自定义参数

在事件绑定的位置传递事件实参e和自定义参数,clickHandler中声明形参,注意顺序对应

javascript 复制代码
function App () {
  // 基础绑定
  // const handleClick = () => {
  //   console.log('button被点击了')
  // }

  // 事件参数e
  // const handleClick = (e) => {
  //   console.log('button被点击了', e)
  // }

  // 传递自定义参数
  // const handleClick = (name) => {
  //   console.log('button被点击了', name)
  // }

  // 既要传递自定义参数 而且还要事件对象e
  const handleClick = (name, e) => {
    console.log('button被点击了', name, e)
  }
  return (
    <div className="App">
      <button onClick={(e) => handleClick('jack', e)}>click me </button>
    </div>
  )
}

三.classnames优化类名控制

classnames是一个简单的JS库,可以非常方便的通过条件动态控制class类名的显示

相关推荐
iccb1013几秒前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树1 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜2 分钟前
跨平台UI自动化-Appium
前端
海底火旺3 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
不要进入那温驯的良夜3 分钟前
浏览器技术原理
前端
在泡泡里3 分钟前
前端 mcp 的使用
前端
爱学习的茄子5 分钟前
React Hooks驱动的Todo应用:现代函数式组件开发实践与组件化架构深度解析
前端·react.js·面试
宇宙全栈Link5 分钟前
当 React 组件调用自定义 hooks,hooks 又调用其他 hooks 时,状态变化如何传播?
前端·javascript·react.js
南方kenny6 分钟前
从0到1理解JS事件委托:让你的代码性能提升一个level
前端·javascript
西瓜树枝7 分钟前
用 iframe 实现前端批量下载的优雅方案 —— 从原理到实战
前端·javascript