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;