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;
相关推荐
Myli_ing5 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
EterNity_TiMe_15 分钟前
【论文复现】(CLIP)文本也能和图像配对
python·学习·算法·性能优化·数据分析·clip
sanguine__18 分钟前
java学习-集合
学习
lxlyhwl18 分钟前
【STK学习】part2-星座-目标可见性与覆盖性分析
学习
nbsaas-boot19 分钟前
如何利用ChatGPT加速开发与学习:以BPMN编辑器为例
学习·chatgpt·编辑器
dr李四维22 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~43 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
CV学术叫叫兽1 小时前
一站式学习:害虫识别与分类图像分割
学习·分类·数据挖掘