当前位置：首页 > article >正文

千峰React:函数组件使用（1）

article 2025/2/27 1:50:01

事件

添加点击事件

function App() {
    const handClick = () => {
      console.log(123)
  }
  return (
    <>
      <button onClick={handClick}>点击</button>
    </>
  )
}
export default App

在react里也可以添加事件对象e

合成e

这个e和js里的e不太一样，是合成的e，里面也可以使用原生的js事件

一个是鼠标经过事件，一个是点击事件，显示出来也不一样

事件委托到容器

我们刚刚添加的事件实际上都会经过react添加到root上，通过事件委托的方式触发

委托的好处就是结构发生变化以后不影响事件

传参处理

箭头函数和高阶函数

高阶函数是用函数的返回值为函数操作的

箭头函数可以传多个参数

function App() {
  const handClick = (e) => {
    console.log(e)
  }
  const handleEnter = (e) => {
    console.log(e)
  }
  const handClick2 = (num) => {
    return () => {
      console.log(num)
    }
  } //函数调用完返回值还是一个函数，是一种高级用法
  const handClick3 = (num, e) => {
    console.log(num, e)
  }//箭头函数传参
  return (
    <>
      <button onClick={handClick} onMouseEnter={handleEnter}>
        点击1
      </button>
      <button onClick={handClick2(123)}>点击2-传参</button>
      <button onClick={(e) => handClick3(123, e)}>点击3-箭头函数</button>
    </>
  )
}
export default App

实操更推荐箭头函数的使用，可以少出bug

箭头函数可以灵活的控制传不传参，传参就写箭头，不传就不写箭头；高阶函数的用法做不到想不传参就不传参

根据不同的条件渲染不同内容

条件运算符、短路运算

如果你想把对象、函数这类在结构上渲染不出来的内容渲染出来，那就使用JSON.stringfy()

如果是其他类型可以使用{undefined+‘’}

function App() {
  return (
    <div>
      {function () {} + ''}
      <br />
      {null + ''}
      <br />
      {undefined + ''}
      <br />
      {JSON.stringify({ username: '荷叶饭' })}
    </div>
  )
}
export default App