跳转至

03.JSX基础

认识JSX

概念:JSX是JavaScript和XML (HTML)的缩写,表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式

优势:

  • HTML的声明模板写法
  • JS的可编程能力

本质:JSX并不是标准的]S语法,它是]S的语法扩展,浏览器本身不能识别,需要通过解析工具(babel)做解析之后才能在浏览器中运行

识别JS表达式

JSX中使用JS表达式 在]SX中可以通过 大括号语法识别JavaScript中的表达式,比如常见的变量、函数调用、方法调用等等

  • 使用号传递字符串
  • 使用JavaScript变量
  • 函数调用和方法调用
  • 使用JavaScript对象

注意:if语句、switch语句、变量声明属于语句,不是表达式,不能出现在{}中

Text Only
const count=100;

function getName(){
  return "Soni"
}
function App() {
  return (
    <div className="App">
      this is app
      {/* 使用号传递字符串 */}
      {'this is msg'}
      {/* 使用JavaScript变量 */}
      {count}
      {/* 函数调用和方法调用 */}
      {getName()}
      {new Date().getDate()}
      {/* 使用JavaScript对象 */}
      <div style={{color:'red'}}>red</div>
    </div>
  );
}

export default App;

实现列表渲染

语法:在JSX中可以使用原生]S中的map方法遍历渲染列表

渲染列表

map循环哪个结构,return结构

注意:加上一个独一无二的key,字符串或者number id

key作用:React框架内部使用,提升性能

Text Only
const list=[
  {id:1001,name:'Vue'},
  {id:1002,name:'React'},
  {id:1003,name:'Angular'},
];

function App() {
  return (
   <div className="App">
    {list.map(item=><li key={item.id}>{item.name}</li>)}
   </div>
  );
}

export default App;

实现基础条件渲染

语法: 在React中,可以通过逻辑与运算符&&、三元表达式 (?:)实现基础的条件渲染

Text Only
const isLogin=true;

function App() {
  return (
   <div className="App">
    {/* 逻辑&& */}
    {isLogin&&<span>this is span</span>}
    {/* 三元运算 */}
    {isLogin?<span>lucy</span>:<span>loading</span>}
   </div>
  );
}

export default App;

实现复杂条件渲染

需求:列表中需要根据文章状态适配三种情况,单图,三图,和无图三种模式

解决方案:自定义函数 + if判断语句

Text Only
const articleType=1;// 013

function getArticleTem(){
  if(articleType===0){
    return <div>我是无图</div>
  }else if(articleType===1){
    return <div>我是单图</div>
  }else{
    return <div>我是三图</div>
  }
}
function App() {
  return (
   <div className="App">
      {getArticleTem()}
   </div>
  );
}

export default App;