前言

时间过得太快一晃就入行前端开发三年了，从入行至今做过各种框架的项目，其中主流的react很久没用了，最近刚好复习了一下顺便做成文章分享一下也方便自己日后回忆，有开发经验的前端看完这个系列的文章已经足够参与普通管理系统项目的编写了（包含了class写法的hooks写法），本系列共有五个章节：

适用人群： 没时间去看官方学习或者找视频进行系统学习，但又临时接手react项目需要快速上手的的小伙伴；或者会vue框架但想快速多学一门框架方便日后上手的小伙伴

正文

这一章主要讲react的JSX语法，这是使用这个框架最基础也是最重要的部分

1、jsx表达式

const getAge = () =>{   //2.原生js方法调用
  return 18
}
const fla = true       //3.三元运算符


function App() {
  return (
    <div className="App">
      {name}
      {getAge()}
      {fla ? "很帅" : "很丑"}
    </div>
  );
}

export default App;

以上是react基本结构，html标签写在return里面，外面定义的变量与方法能在标签中{}包裹使用

2、jsx列表渲染

技术方案：map 重复渲染谁就return谁注：加key，即用map方法进行循环渲染即可

//
const du = [
    {id:1,name:'情书'},
    {id:2,name:'青花'},
    {id:3,name:'吻别'},
  ]
  
  function App() {
    return (
      <div className="App">
        {du.map(du=><li key={du.id}>{du.name}</li>)}
      </div>
    );
  }
  
  export default App;

3、jsx的条件渲染

技术方案：三元表达式与&&逻辑运算

三元表达式，满足条件才渲染一个span标签

逻辑运算&&

let flat = true
function App() {
  return (
    <div className="App">
      {flat?<span>三元表达式满足条件了我要渲染出来</span>:null}

      {true&&<span>&&逻辑运算满足条件了我要渲染出来</span>}
    </div>
  );
}

export default App;

也是和普通变量一样，直接在{}里面进行判断即可

4、复杂jsx的条件渲染

有一个状态type 1 2 3，实现1=>h1 2=>h2 3=>h3

原则：模板中的逻辑尽量精简-----复杂时通过一个专门函数实现，模板中调用即可

const getEvent = (type)=>{
    if(type==1){
      return <h1>我是h1标签</h1>
    }
    if(type==2){
      return <h2>我是h2标签</h2>
    }
    if(type==3){
      return <h3>我是h3标签</h3>
    }
  }
  function App() {
    return (
      <div className="App">
        {getEvent(1)}
        {getEvent(2)}
      </div>
    );
  }
  
  export default App;

判断复杂时可以通过方法进行判断，方法直接写在{}即可

5、jsx样式处理

主要说明：1.行内样式 2.类名样式

jsx注意事项：

return里面必须有根元素，最少要有一个<></>包着

所有标签必须闭合，成对闭合或者自闭都可以

JSX语法更接近JS语法，属性名采用驼峰命名-----如margin-top写marginTop

JSX支持多行（换行），如果需要换行，需使用（）包着，防止出现bug

import './app.css'    //引用类名所在的文件
let duu = true
function App() {
  return (
    <div className="App">
      {/* 可以把{color:'red',fontSize:'30px'}抽离放到变量里使用 */}
      {<span style={{color:'red',fontSize:'30px'}}>我是行内样式</span>}

        {/*动态控制duu为true才显示样式  */}
      {<span className={duu?'du':''}>我是类名样式</span>}
    </div>
  );
}

export default App;

以上代码包含了动态class使用className,和使用style={{}}进行样式的编写

小结

算是先熟悉react框架页面的代码结构，如果是突然接手一个react项目，那么以上JSX语法足够入门，能够正常配合js逻辑写标签和样式，后面我将会讲解组件的使用与通迅。

React语法快速入门，JSX基本语法使用

前言

正文

1、jsx表达式

2、jsx列表渲染

3、jsx的条件渲染

4、复杂jsx的条件渲染

5、jsx样式处理

小结