react

react

一、题外的一些问题

安装包一般用yarn比较好，npm会丢失包，yarn add 名字就可以下载

二、react的基本语法

1.jsx,或者tsx就是标签和js都在一起，标签（）括起来，编译的过程中会被babel解析器解析

2. 循环渲染

主要利用map

 const list =[{name:'小明',id:20},{name:'小红',id:15},{name:'小兰',id:22},]
  
 function mingzi (){
   return (
     <div className="guoqu">{list.map(item=>{
        return <span key={item.id} >{item.name}</span>
     })}</div>
   )
 }

3.条件渲染

a. 可以利用三元表达式，也可以用if条件,如果标签结构很复杂可以用（）括起来。

  const list =[{name:'小明',id:20,switch:true},{name:'小红',id:15,switch:false},{name:'小兰',id:22,switch:true},]
  
 function mingzi (){
   return (
   
   //用的三元表达式控制的
   
     <div className="guoqu">{list.map(item=>{ 
        <span key={item.id} >{item.switch?item.name:null}</span> 
     })}</div>
   
   //用的条件语句判断的
   
     <div className="guoqu">{list.map(item=>{
        if(item.switch){
        <span key={item.id} >{item.name}</span>
        } 
     })}</div> 
   )
 }

b.短路运算

c.如果更加复杂的模板直接用函数包裹起来

3.jsx的样式控制

a.第一种是内联样式 直接style,里面的是双大括号，第一个{}是识别为对象，第二个是写属性和属性名

function app (){
    return (<div>
     <p style={{color:red}} ></p>
    </div>)
}

b.第二种是类名样式

直接用className

c.动态类名的添加

可以利用三元来控制，还有复杂的方法来设置

const flag =true
function app(){
   return (
     <div className={flag?'activity':''} ></div>
   )
 
}

4.jsx注意事项

a.幽灵节点

react独有的，return（）出去的结构必须只有一个根节点，所以可以直接写一个空的节点来解决

function app(){
    return (
      < >
        <div>akjsdh</div>
        <div>akjsdh</div>
      </>
    )
}

b.所有标签都闭合，或者自闭和

c.jsx更接近js语法，所有的都是托付命名，eg class -> className 或者for ->htmlFor

d. jsx支持多行换行，但是要用（）包裹，不至于出现语法错误

e.www.bilibili.com/video/BV1Z4… vscode的插件，react有提示