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

千峰React:组件使用（1）

news 2025/2/22 2:20: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