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;
相关推荐
im_AMBER2 分钟前
学习日志05 python
python·学习
杨进军3 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW18 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字24 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
真的想上岸啊1 小时前
学习C++、QT---18(C++ 记事本项目的stylesheet)
开发语言·c++·学习
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端