千峰React:组件使用（1）

事件

添加点击事件

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

妈的写了三千字的博客没保存cnm