react基础学习 JSX

JSX的测试网站 Babel · Babel 可以测试代码的效果

JSX实现map列表 注意 key不一样(使用遍历的时候)

这也是一种写法 小括号(适用于循环复杂的情况)

复制代码
  {defaultList.map(item=>(
              <div className="reply-item"></div>
))}

简单条件渲染

复杂条件渲染

绑定事件

复制代码
function App() {

  const colorse = (e)=>{
    console.log("测试点击",e);
  }
  const colorse1 = (name)=>{
    console.log("测试点击",name);
  }
  const colorse2 = (name,e)=>{
    console.log("测试点击",name,e);
  }
  return (
    <div className="App" >
      这是我的世界 <br></br>
      <button onClick={colorse} >测试点击事件</button>
      <button onClick={()=>colorse1("你是好的")} >测试点击事件传参</button>
      <button onClick={(e)=>colorse2("你是好的",e)} >测试点击事件传参</button>
    </div>
  );
}
export default App;
相关推荐
掘金安东尼几秒前
🧭前端周刊第437期(2025年10月20日–10月26日)
前端·javascript·github
浩男孩6 分钟前
🍀【总结】使用 TS 封装几条开发过程中常使用的工具函数
前端
Mintopia12 分钟前
🧠 AIGC + 区块链:Web内容确权与溯源的技术融合探索
前端·javascript·全栈
晓得迷路了15 分钟前
栗子前端技术周刊第 103 期 - Vitest 4.0、Next.js 16、Vue Router 4.6...
前端·javascript·vue.js
Mintopia16 分钟前
🚀 Next.js Edge Runtime 实践学习指南 —— 从零到边缘的奇幻旅行
前端·后端·全栈
终焉代码21 分钟前
【Linux】进程初阶(1)——基本进程理解
linux·运维·服务器·c++·学习·1024程序员节
GISer_Jing22 分钟前
不定高虚拟列表性能优化全解析
前端·javascript·性能优化
Predestination王瀞潞37 分钟前
WEB前端技术基础(第三章:css-网页美化的衣装-上)
前端·css
鹏多多41 分钟前
深度解析React中useEffect钩子的使用
前端·javascript·react.js
超级大只老咪41 分钟前
CSS基础语法
前端